react 使用状态管理调用列表接口渲染列表(包含条件查询,统一使用查询按钮,重置功能),避免重复多次调用接口的方法
react开发调用api接口一般使用useEffect来监听值的变化,通过值的变化与否来进行接口调用。
比如我们要进行一个查询接口
const [pageParams, setPage] = useState({name: '',id: '',});const [dataList, setDataList] = useState([]);const getList = async () => {const res = await requirementList({...pageParams,});setDataList(res.data.records);};useEffect(() => {getList();}, [pageParams]);//当pageParams值变化的时候,就会触发list接口
当然,页面内可能会有很多的按钮,比如有两个input框,一个input框是控制查询名称,一个input是查询id。这两个按钮后面有一个查询按钮,当点击查询按钮的时候,才会进行页面的数据处理。
因此需要绑定两个input的值,但是每次进行input值的时候就会触发接口调取,
const app =()=>{const handleName = (value) =>{setPage((prev)=>{return {...prev,name:value}});}const handleId = (value) =>{setPage((prev)=>{return {...prev,id:value}});}//查询按钮const handleSearchDemand = () => {getList();}//因为我们每次更改input的值,都会导致pageParams的值发生变化,这就会导致接口调用,但是我们需要再查询的时候才调用,因此需要更改useEffect的监听条件,改为首次进入页面触发,[pageParams] 更改为[]useEffect(() => {getList();}, []);return (<div><Input value={pageParams.name} onChange={handleName} /><Input value={pageParams.id} onChange={handleId} /><Button onClick={handleResetSearch}>重置</Button><Button type="primary" onClick={handleSearch}>查询</Button></div>)}
重置按钮也需要我们不仅把input的值置为空,并且在置空完成后,需要对接口重新进行调用。
错误代码:
const handleResetSearch = () =>{setSearchValue((prevData) => ({...prevData,name: '',id: '',}));list(); }
如果我们在这里直接调用list接口,是无法进行同步的接口数据调用的,因为setSearchValue函数是一个异步函数,会导致我们调用接口的时候还是老的值,没有进行重置值。因此还是通过监听input的值的变化来进行接口调用,但是同时我们又不想在input值变化时候立即调用,因为我们可以添加一个中间状态,通过一个中间状态来进行处理。
正确代码:
//设置一个状态,在点击重置按钮,设置为true,useEffect监听到值变化,我们再设置为false,从而形成一个完美闭环const [resetStatus, setResetStatus] = useState(false);const handleResetSearch = () =>{setSearchValue((prevData) => ({...prevData,name: '',id: '',}));setResetStatus(true);}useEffect(() => {if (resetStatus) {getList();setResetStatus(false);}}, [resetStatus])
这样处理,就可以解决上述问题产生的矛盾,只需要在重置完成后,准确的同步调用列表接口了。
相关文章:
react 使用状态管理调用列表接口渲染列表(包含条件查询,统一使用查询按钮,重置功能),避免重复多次调用接口的方法
react开发调用api接口一般使用useEffect来监听值的变化,通过值的变化与否来进行接口调用。 比如我们要进行一个查询接口 const [pageParams, setPage] useState({name: ,id: ,});const [dataList, setDataList] useState([]);const getList async () > {const…...
Stable Audio Open模型部署教程:用AI打造独家节拍,让声音焕发新活力!
Stable Audio Open 是一个开源的文本到音频模型,允许用户从简单的文本提示中生成长达 47 秒的高质量音频数据。该模型非常适合创建鼓点、乐器即兴演奏、环境声音、拟音录音和其他用于音乐制作和声音设计的音频样本。用户还可以根据他们的自定义音频数据微调模型&…...
加油站-(贪心算法)
题目描述 在一条环路上有 n 个加油站,其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发,开始时油箱为空。 给定两个整数数组 gas…...
k8s-持久化存储PV与PVC(1)
1、概述 为什么 kubernetes 要持久化存储? 在 kubernetes 中部署应用都是以 Pod 的容器运行的,而 Pod 是有生命周期,一旦 Pod 被删除或重启后,这些数据也会随着丢失,则需要对这些数据进行持久化存储。 PV࿱…...
Linux Red Hat Enterprise
下载 https://developers.redhat.com/products/rhel/download 安装...
《中型 Vue 项目:挑战与成长》
一、引言 在当今的前端开发领域,Vue 作为一款渐进式 JavaScript 框架,以其强大的功能和灵活性备受开发者青睐。对于中型 Vue 项目而言,其重要性不言而喻。中型 Vue 项目通常在功能复杂度和规模上介于小型项目和大型项目之间,既需要…...
配置 DNS over HTTPS阻止DNS污染
概念介绍 DOH简介 DNS(域名系统)的主要功能是将域名解析成IP地址,域名的解析工作由DNS服务器完成。从安全角度来看,域名解析的请求传输时通常不进行任何加密,这导致第三方能够很容易拦截用户的DNS,将用…...
Facebook广告文案流量秘诀
Facebook 广告文案是制作有效 Facebook 广告的关键方面。它侧重于伴随广告视觉元素的文本内容。今天我们的博客将深入探讨成功的 Facebook 广告文案的秘密! 一、广告文案怎么写? 正文:这是帖子的正文,出现在您姓名的正下方。它可…...
22. 五子棋小游戏
文章目录 概要整体架构流程技术名词解释技术细节小结 1. 概要 🔊 JackQiao 对 米粒 说:“今天咱们玩个五子棋小游戏,电脑与你轮流在一个 nn 的网格上放置棋子(X 或 O),网格由你输入的正整数n决定࿰…...
fastadmin框架同时使用 阿里云oss和阿里云点播
背景 项目的实际需求中既要用到阿里云oss产品又用到阿里云点播系统,实现完美的统一。设置两个地址downUrl,thirdCode。分别代表阿里云oss上传路径和阿里云点播系统vId。 实现 默认框架你已经集成好阿里云oss集成工作,前端html页面实现 <…...
Java-JMX 组件架构即详解
JMX架构由三个主要组件构成: MBeans(Managed Beans):代表可管理的资源,是JMX的核心。MBean可以是Java类或接口,提供了管理操作的接口,如获取系统信息、设置参数等。MBeanServer&#x…...
unity打包web,发送post请求,获取地址栏参数,解决TypeError:s.replaceAll is not a function
发送post请求 public string url "http://XXXXXXXXX";// 请求数据public string postData "{\"user_id\": 1}";// Start is called before the first frame updatevoid Start(){// Post();StartCoroutine(PostRequestCoroutine(url, postData…...
java+ssm+mysql校园物品租赁网
项目介绍: 使用javassmmysql开发的校园物品租赁网,系统包含管理员、用户角色,功能如下: 管理员:用户管理;物品管理(物品种类、物品信息、评论信息);订单管理࿱…...
Spring Boot中实现JPA多数据源配置指南
本文还有配套的精品资源,点击获取 简介:本文详细介绍了在Spring Boot项目中配置和使用JPA进行多数据源管理的步骤。从引入依赖开始,到配置数据源、创建DataSource bean、定义实体和Repository,最后到配置事务管理器和使用多数据…...
服务器加固
1.服务器密码复杂度 密码最小长度,密码复杂度策略 vim /etc/pam.d/system-auth --------------- #密码配置 #ucredit:大写字母个数;lcredit:小写字母个数;dcredit:数字个数;ocredit:…...
探索CSS中的背景图片属性,让你的网页更加美观
导语:在网页设计中,背景图片的运用能够丰富页面视觉效果,提升用户体验。本文将详细介绍CSS中背景图片的相关属性,帮助大家更好地掌握这一技能。 一、背景图片基本属性 1、background-image 该属性用于设置元素的背景图片。语法如…...
Oracle的打开游标(OPEN_CURSORS)
一、OPEN_CURSORS 概述 OPEN_CURSORS 指定会话一次可以拥有的打开游标(私有 SQL 区域的句柄)的最大数量。可以使用此参数来防止会话打开过多的游标。 OPEN_CURSORS参数说明 特性 描述 参数类型 Integer 默认值 50 修改方式 ALTER SYSTEM PDB级别…...
数值分析—数值积分
研究背景 积分的数学解法为牛顿莱布尼兹公式,数学表示为 ∫ a b f ( x ) d x F ( b ) − F ( a ) \int_{a}^{b} f(x)dxF(b)-F(a) ∫abf(x)dxF(b)−F(a),但应用该方法有如下困难: 1, f ( x ) f(x) f(x)的原函数有时不能用初等函…...
克服大规模语言模型限制,构建新的应用方法——LangChain
大模型 大模型的出现和落地开启了人工智能(AI)新一轮的信息技术革命,改变了人们的生 活方式、工作方式和思维方式。大模型的落地需要数据、算力和算法三大要素。经过几 年发展,大模型的数据集(包括多模态数据集)制作已经形成了规约,Meta、Go…...
计算机网络 —— HTTPS 协议
前一篇文章:计算机网络 —— HTTP 协议(详解)-CSDN博客 目录 前言 一、HTTPS 协议简介 二、HTTPS 工作过程 1.对称加密 2.非对称加密 3.中间人攻击 4.引入证书 三、HTTPS 常见问题 1.中间人能否篡改证书? 2.中间人能否调…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令: return <value>;在收到客户端连接后,立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量(如 $time_iso8601、$remote_addr 等)&a…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
