当前位置: 首页 > news >正文

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来监听值的变化&#xff0c;通过值的变化与否来进行接口调用。 比如我们要进行一个查询接口 const [pageParams, setPage] useState({name: ,id: ,});const [dataList, setDataList] useState([]);const getList async () > {const…...

Stable Audio Open模型部署教程:用AI打造独家节拍,让声音焕发新活力!

Stable Audio Open 是一个开源的文本到音频模型&#xff0c;允许用户从简单的文本提示中生成长达 47 秒的高质量音频数据。该模型非常适合创建鼓点、乐器即兴演奏、环境声音、拟音录音和其他用于音乐制作和声音设计的音频样本。用户还可以根据他们的自定义音频数据微调模型&…...

加油站-(贪心算法)

题目描述 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱为空。 给定两个整数数组 gas…...

k8s-持久化存储PV与PVC(1)

1、概述 为什么 kubernetes 要持久化存储&#xff1f; 在 kubernetes 中部署应用都是以 Pod 的容器运行的&#xff0c;而 Pod 是有生命周期&#xff0c;一旦 Pod 被删除或重启后&#xff0c;这些数据也会随着丢失&#xff0c;则需要对这些数据进行持久化存储。 PV&#xff1…...

Linux Red Hat Enterprise

下载 https://developers.redhat.com/products/rhel/download 安装...

《中型 Vue 项目:挑战与成长》

一、引言 在当今的前端开发领域&#xff0c;Vue 作为一款渐进式 JavaScript 框架&#xff0c;以其强大的功能和灵活性备受开发者青睐。对于中型 Vue 项目而言&#xff0c;其重要性不言而喻。中型 Vue 项目通常在功能复杂度和规模上介于小型项目和大型项目之间&#xff0c;既需要…...

配置 DNS over HTTPS阻止DNS污染

概念介绍 DOH简介 ​ DNS&#xff08;域名系统&#xff09;的主要功能是将域名解析成IP地址&#xff0c;域名的解析工作由DNS服务器完成。从安全角度来看&#xff0c;域名解析的请求传输时通常不进行任何加密&#xff0c;这导致第三方能够很容易拦截用户的DNS&#xff0c;将用…...

Facebook广告文案流量秘诀

Facebook 广告文案是制作有效 Facebook 广告的关键方面。它侧重于伴随广告视觉元素的文本内容。今天我们的博客将深入探讨成功的 Facebook 广告文案的秘密&#xff01; 一、广告文案怎么写&#xff1f; 正文&#xff1a;这是帖子的正文&#xff0c;出现在您姓名的正下方。它可…...

22. 五子棋小游戏

文章目录 概要整体架构流程技术名词解释技术细节小结 1. 概要 &#x1f50a; JackQiao 对 米粒 说&#xff1a;“今天咱们玩个五子棋小游戏&#xff0c;电脑与你轮流在一个 nn 的网格上放置棋子&#xff08;X 或 O&#xff09;&#xff0c;网格由你输入的正整数n决定&#xff0…...

fastadmin框架同时使用 阿里云oss和阿里云点播

背景 项目的实际需求中既要用到阿里云oss产品又用到阿里云点播系统&#xff0c;实现完美的统一。设置两个地址downUrl&#xff0c;thirdCode。分别代表阿里云oss上传路径和阿里云点播系统vId。 实现 默认框架你已经集成好阿里云oss集成工作&#xff0c;前端html页面实现 <…...

Java-JMX 组件架构即详解

JMX架构由三个主要组件构成&#xff1a; ‌MBeans&#xff08;Managed Beans&#xff09;‌&#xff1a;代表可管理的资源&#xff0c;是JMX的核心。MBean可以是Java类或接口&#xff0c;提供了管理操作的接口&#xff0c;如获取系统信息、设置参数等。‌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校园物品租赁网

项目介绍&#xff1a; 使用javassmmysql开发的校园物品租赁网&#xff0c;系统包含管理员、用户角色&#xff0c;功能如下&#xff1a; 管理员&#xff1a;用户管理&#xff1b;物品管理&#xff08;物品种类、物品信息、评论信息&#xff09;&#xff1b;订单管理&#xff1…...

Spring Boot中实现JPA多数据源配置指南

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;本文详细介绍了在Spring Boot项目中配置和使用JPA进行多数据源管理的步骤。从引入依赖开始&#xff0c;到配置数据源、创建DataSource bean、定义实体和Repository&#xff0c;最后到配置事务管理器和使用多数据…...

服务器加固

1.服务器密码复杂度 密码最小长度&#xff0c;密码复杂度策略 vim /etc/pam.d/system-auth --------------- #密码配置 #ucredit&#xff1a;大写字母个数&#xff1b;lcredit&#xff1a;小写字母个数&#xff1b;dcredit&#xff1a;数字个数&#xff1b;ocredit&#xff1a;…...

探索CSS中的背景图片属性,让你的网页更加美观

导语&#xff1a;在网页设计中&#xff0c;背景图片的运用能够丰富页面视觉效果&#xff0c;提升用户体验。本文将详细介绍CSS中背景图片的相关属性&#xff0c;帮助大家更好地掌握这一技能。 一、背景图片基本属性 1、background-image 该属性用于设置元素的背景图片。语法如…...

Oracle的打开游标(OPEN_CURSORS)

一、OPEN_CURSORS 概述 OPEN_CURSORS 指定会话一次可以拥有的打开游标&#xff08;私有 SQL 区域的句柄&#xff09;的最大数量。可以使用此参数来防止会话打开过多的游标。 OPEN_CURSORS参数说明 特性 描述 参数类型 Integer 默认值 50 修改方式 ALTER SYSTEM PDB级别…...

数值分析—数值积分

研究背景 积分的数学解法为牛顿莱布尼兹公式&#xff0c;数学表示为 ∫ a b f ( x ) d x F ( b ) − F ( a ) \int_{a}^{b} f(x)dxF(b)-F(a) ∫ab​f(x)dxF(b)−F(a)&#xff0c;但应用该方法有如下困难&#xff1a; 1&#xff0c; f ( x ) f(x) f(x)的原函数有时不能用初等函…...

克服大规模语言模型限制,构建新的应用方法——LangChain

大模型 大模型的出现和落地开启了人工智能(AI)新一轮的信息技术革命&#xff0c;改变了人们的生 活方式、工作方式和思维方式。大模型的落地需要数据、算力和算法三大要素。经过几 年发展&#xff0c;大模型的数据集(包括多模态数据集)制作已经形成了规约&#xff0c;Meta、Go…...

计算机网络 —— HTTPS 协议

前一篇文章&#xff1a;计算机网络 —— HTTP 协议&#xff08;详解&#xff09;-CSDN博客 目录 前言 一、HTTPS 协议简介 二、HTTPS 工作过程 1.对称加密 2.非对称加密 3.中间人攻击 4.引入证书 三、HTTPS 常见问题 1.中间人能否篡改证书&#xff1f; 2.中间人能否调…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...