封装一个请求的hook(react函数组件)

对于后台系统,上面筛选,下面表格分页的页面,这个hook非常实用
omitBy方法:过滤不为undefined的对象属性

export const omitBy = <T extends IObject, K extends keyof T>(object:T, predicate:(value:T[K]) => boolean):IObject => {if (typeof object !== 'object') {return object;}const newObject:IObject = {};Object.keys(object).forEach((item) => {if (predicate(object[item])) {newObject[item] = object[item];}});return newObject;
};
export const useFetchHook = (fetchPromiseFunc:(params?:any) => Promise<any>, params?:any, initialData?:any, deps?:ReadonlyArray<any>, fetchFlag?:boolean) => {const [data, setData] = useState(initialData);const [loading, setLoading] = useState(false);console.log('重新执行了该hook');// 处理对象参数:当value为空时,omit该参数const formattedParams = omitBy(params, (item) => item !== undefined );useEffect(() => {const fetchData = async() => {try {setLoading && setLoading(true);const result = await fetchPromiseFunc(formattedParams);if (result.status.toString() !== '200') {if(result.data.error_code) {//todo sth...} else if(result.data.statusText){message.error(result.data.statusText);} else if(result.data.msg) {message.error(result.data.msg || '接口异常');}} else {setData(result.data);}setLoading && setLoading(false);} catch (error) {setLoading && setLoading(false);}};if(fetchFlag === undefined || fetchFlag) {fetchData();}else {setData(initialData);}}, deps ? deps : []);return [data, loading];
};

使用

const [classData, loading] = useFetchHook(yourFetchFunc, { ...filterParams, ...paginationParams }, [], [filterParams, paginationParams, filterFlag]);

filterParams: 用在筛选条件
paginationParams:分页筛选
filterFlag:其他自定义筛选

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/59447.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI大模型重塑软件开发:流程、优势、挑战与展望

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

一篇文章教会你,Pycharm 的常用配置及快捷键~

每一位Python开发者都熟悉PyCharm这个强大的IDE&#xff0c;它提供了丰富的功能来提高编程效率。但你是否充分利用了PyCharm的所有配置和快捷键&#xff1f;今天&#xff0c;我们就来深度剖析PyCharm的常用配置和快捷键&#xff0c;让你从入门到精通&#xff0c;提升编程效率&a…

聚划算!Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN五模型多变量回归预测

聚划算&#xff01;Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN五模型多变量回归预测 目录 聚划算&#xff01;Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN五模型多变量回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 聚划算&#xff01;Tran…

【网络安全】|kali中安装nessus

1、使用 df -h 命令查看磁盘使用情况&#xff0c;确保磁盘容量大于40G 简单粗暴办法&#xff1a;重装系统&#xff0c;装系统中注意磁盘空间相关的选项 //磁盘扩容&#xff1a;https://wiki.bafangwy.com/doc/670/ 2、安装 nessus 安装教程 https://blog.csdn.net/Cairo_A/a…

sqlserver、达梦、mysql调用存储过程(带输入输出参数)

1、sqlserver&#xff0c;可以省略输出参数 --sqlserver调用存储过程&#xff0c;有输入参数&#xff0c;有输出参数--省略输出参数 exec proc_GetReportPrintData 1, , , 1--输出参数为 null exec proc_GetReportPrintData 1, , , 1, null--固定输出参数 exec proc_GetReport…

要在微信小程序中让一个 `view` 元素内部的文字水平垂直居中,可以使用 Flexbox 布局

文章目录 主要特点&#xff1a;基本用法&#xff1a;常用属性&#xff1a; 要在微信小程序中让一个 view 元素内部的文字水平垂直居中&#xff0c;可以使用 Flexbox 布局。以下是如何设置样式的示例&#xff1a; .scan-button {display: flex; /* 启用 Flexbox 布局 */justify…

Java基础-I/O流

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 字节流 定义 说明 InputStream与OutputStream示意图 说明 InputStream的常用方法 说明 OutputStrea…

【Linux】简易版shell

文章目录 shell的基本框架PrintCommandLineGetCommandLineParseCommandLineExecuteCommandInitEnvCheckAndExecBuildCommand代码总览运行效果总结 shell的基本框架 要写一个命令行我们首先要写出基本框架。 打印命令行获取用户输入的命令分析命令执行命令 基本框架的代码&am…

Java项目实战II基于Java+Spring Boot+MySQL的网上摄影工作室(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着互联网…

宝塔Linux面板安装PHP扩展失败报wget: unable to resolve host address ‘download.bt.cn’

一、问题&#xff1a; 当使用宝塔面板安装PHP扩展失败出现如下错误时 Resolving download.bt.cn(download.bt.cn)...failed: Connection timed out. wget: unable toresolve host address download.bt.cn’ 二、解决&#xff1a; 第一步&#xff1a;如下命令执行拿到返回的I…

攻防靶场(28):通过SNMP进行信息收集 JOY

目录 1.侦查 1.1 获取目标网络信息&#xff1a;IP地址 1.2 主动扫描&#xff1a;扫描IP地址块 1.3 收集受害者主机信息&#xff1a;软件 2. 数据窃取 2.1 通过备用协议窃取&#xff1a;通过未加密的非C2协议窃取 2.2 通过备用协议窃取&#xff1a;通过未加密的非C2协议窃取 3. …

LeetCode:83. 删除排序链表中的重复元素 II(java) 保留一个重复的

目录 题目描述: 代码: 第一种: 第二种: 题目描述: 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,1,2] 输出&#xff1a;[1,2]示例 2&#xff1a…

C++ 类与对象(类、实例化、this指针)

目录 一、前言 二、正文 1.类和对象 1.1类定义格式 1.2访问限定符 1.3类域 2.实例化 2.1实例化概念 2.2对象大小 3.this指针 三、结语 一、前言 前面我们已经了解了缺省参数和函数重载等&#xff0c;今天让我们来学习类与对象吧&#xff0c;因为类与对象的内容很多&a…

【jvm】为什么Xms和Xmx的值通常设置为相同的?

目录 1. 说明2. 避免性能开销3. 提升稳定性4. 简化配置5. 优化垃圾收集6. 获取参数6.1 代码示例6.2 结果示例 1. 说明 1.-Xms 和 -Xmx 参数分别用于设置堆内存的初始大小&#xff08;最小值&#xff09;和最大大小。2.在开发环境中&#xff0c;开发人员可能希望快速启动应用程…

element-plus校验单个form对象合法性

在 Vue 中&#xff0c;循环生成的表单列表&#xff0c;并且每个表单中包含多个对象&#xff0c;使用 v-for 来创建这些表单&#xff0c;并且使用动态 prop 路径来验证单个对象是否满足必填校验。 <template><el-form ref"formRef" :model"form" …

大模型面试题:Prefix LM和Causal LM的区别是啥?

获取更多面试真题的集合&#xff0c;请移步至 https://pica.zhimg.com/80/v2-7fd6e77f69aa02c34ca8c334870b3bcd_720w.webp?sourced16d100b 说白了&#xff1a;就是attention mask不一样&#xff0c;如下所示&#xff1a; img 它们定义如下&#xff1a; Prefix LM&#xff…

学习虚幻C++开发日志——定时器

官方文档&#xff1a;虚幻引擎中的Gameplay定时器 | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 定时器 安排在经过一定延迟或一段时间结束后要执行的操作。例如&#xff0c;您可能希望玩家在获取某个能力提升道具后变得无懈可击&#xff0c;…

mac终端运行 MySQL语句 和服务器相关命令

文章目录 1.mac服务器相关命令1.获取mac电脑的IP 2.MySQL语句1. 退出 MySQL&#xff1a;2.使用新密码连接&#xff1a;3.创建一个新数据库&#xff1a;4.查看数据库列表&#xff1a;5.使用数据库&#xff1a;6.创建一个用户表&#xff1a;7.插入数据8.查询数据9.更新数据10.删除…

Windows达梦8数据库:本地编码:PG_GBK, 导入文件编码:PG_UTF8错误最优解决方法

在windows使用达梦8DM管理工具直接导入.dmp文件(可能是从Linux导出的)时出现该错误 错误如下 解决方案如下&#xff1a; 1、重新建立UTF-8编码的数据库 2、新建一个模式 3、使用CMD 命令进行导入 找到DM数据库的安装路径的bin 目录下 cmd 进入终端&#xff0c;使用命令&…

【极客兔兔-Web框架Gee详解】Day0 序言

文章目录 一、Web 开发1. 什么是Web 开发&#xff1f;2. 主要组成部分2.1 前端开发2.2 后端开发2.3 全栈开发2.4 数据库管理 3. Web开发过程3.1 规划和设计&#xff1a;3.2 开发和编码&#xff1a;3.3 测试和优化&#xff1a;3.4 部署和维护&#xff1a; 4. 总结 二、用标准库n…