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

react 使用状态管理调用列表接口渲染列表（包含条件查询，统一使用查询按钮，重置功能），避免重复多次调用接口的方法

news 来源：原创 2025/7/14 21:41:42

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…...

编程日记 2025/7/14 21:41:42

常见限流算法详细解析

常见限流算法详细解析 分布式系统中&#xff0c;由于接口API无法控制上游调用方的行为&#xff0c;因此当瞬时请求量突增时&#xff0c;会导致服务器占用过多资源&#xff0c;发生响应速度降低、超时、乃至宕机&#xff0c;甚至引发雪崩造成整个系统不可用。 限流&#xff0c;…...

编程日记 2025/7/13 21:05:24

第四十一天 ASP应用 HTTP.sys 漏洞 iis6文件解析漏洞和短文件漏洞 access数据库泄露漏洞

前言 随着时代的发展现在呀&#xff0c;这个ASp已经淡出大众的视线了 &#xff0c;ASP之前的火爆程度无异于现在的PHP 大家的童年 4399 什么的网站都是这个搭建的ASP 简介 | 菜鸟教程 那大家想问为什么你妹的 这个这么火的网站搭建语言被淘汰了呢 其实多半是以为它的不开…...

编程日记 2025/7/14 14:54:37

LLM输出评估标准

LLM输出评估标准 LLM评估方法 响应的完整性和简洁性&#xff1a;确定大模型的响应是否完全解决用户查询&#xff0c;简洁性则评估生成响应的相关性。文本相似性指标&#xff1a;将生成的文本与参考文本进行比较&#xff0c;评估它们的相似度&#xff0c;并给出得分以理解大模…...

编程日记 2025/7/14 21:04:18

ansible学习笔记之02command模块与shell模块

目录 1、概述 2、模块介绍 2.1 command模块 2.2 shell模块 2.3 小结 3、实验 3.1 测试ls命令 3.2 测试环境变量 3.3 测试操作符">" 1、概述 本文介绍ansible的command模块与shell模块&#xff0c;并通过实验比对两个模块的异同。 2、模块介绍 2.1…...

编程日记 2025/7/14 10:26:30

Python 在同一/或不同PPT文档之间复制幻灯片

复制幻灯片可以帮助我们更高效地完成工作&#xff0c;节省大量的制作时间。通过复制现有的幻灯片&#xff0c;可以快速创建新的演示文稿&#xff0c;而无需重新设计板式样式等。此外&#xff0c;复制幻灯片还可以帮助我们保持内容的一致性&#xff0c;使整个PPT演示文稿看起来更…...

编程日记 2025/7/9 9:10:53

4. React 性能优化技巧：如何让你的应用更快

在构建大型应用时&#xff0c;性能优化是一个非常重要的话题。React 提供了许多优化工具&#xff0c;帮助我们提高应用的渲染速度和响应能力。本文将分享一些常见的 React 性能优化技巧。 4.1. 使用 React.memo 缓存组件 当组件的 props 没有变化时&#xff0c;React 默认不会…...

编程日记 2025/7/14 21:33:49

云标准：云计算标准

目录 云计算标准的定义和分类 云计算标准的内容 云计算标准的重要性 云计算标准化组织 5.云计算标准的具体实例 云计算标准是确保云计算技术、服务和应用发展的重要规范&#xff0c;它们对于提高云计算系统的互操作性、可靠性和安全性至关重要。以下是对云计算标准的详细解…...

编程日记 2025/7/9 1:04:07

Redis【2】- SDS源码分析

1 简介&基础用法 Redis 中用得最多的就是字符串&#xff0c;在 C 语言中其实可以直接使用 char* 字符数组来实现字符串&#xff0c;也有很多可以直接使用得函数。但是 Redis 并没有使用 C 语言原生的字符串&#xff0c;而是自己实现了一个 SDS&#xff08;简单动态字符串&…...

编程日记 2025/7/14 19:04:40

力扣打卡8：最长上升子序列

链接&#xff1a;300. 最长递增子序列 - 力扣&#xff08;LeetCode&#xff09; 本题我开始想到的是dp&#xff0c;复杂度为O(n^2)&#xff0c;这也是很经典的解法。 看到进阶解法可以O(nlogn)&#xff0c;想到可能是要用到二分&#xff0c;但是&#xff0c;我想到的是和map排…...

编程日记 2025/7/12 11:19:48

记录一次老平台改造通知用户刷新页面，纯前端实现

记录一次老平台改造通知用户刷新页面&#xff0c;纯前端实现 方案概述背景现状问题本质 方案设计前提设计实现 其他补充写在最后的话抛出一个问题 方案概述 背景 前端构建完上线&#xff0c;用户还停留还在老页面&#xff0c;用户不知道网页重新部署了&#xff0c;跳转页面的时…...

编程日记 2025/7/14 1:25:46

ubuntu22.04 使用可以用的镜像源获取你要的镜像

默认的是不行的 不管pull啥镜像 仍然会出现这个错误 Error response form daemon:Get "https://registry-1.docker.io/v2": net/http: request canceled while waiting for connection (Client.Timeout exceeded while await) 操作方法是 如果在目录没有/etc/docker…...

编程日记 2025/7/14 21:27:26

Chrome扩展程序开发示例

项目文件夹内文件如下&#xff1a; manifest.json文件内容&#xff1a; {"manifest_version": 3,"name": "我的法宝","description": "我的有魔法的宝贝","version": "1.0","icons": {"…...

编程日记 2025/7/14 21:02:58

Linux 下使用飞鸽传书实现与Windows飞秋的通信

最近把单位的办公电脑换成Linux系统&#xff0c;但是其他同事们都使用飞秋2013进行局域网通信和文件传输&#xff0c;经过一番尝试&#xff0c;发现飞鸽传书For Linux 2014能够实现两者的互相通信。 飞鸽传书ForLINUXLinux版下载_飞鸽传书ForLINUX免费下载_飞鸽传书ForLINUX1.2…...

编程日记 2025/7/13 1:51:40

docker批量创建cloudstack虚拟主机脚本

批量创建cloudstack脚本 #!/bin/bash # 配置变量 container_prefix"cloudworker-" base_ip"192.168.1." start_ip2 #开始ip start_container2 #上同 end_container4 #结束ip 包括 network_name"my_macvlan_network" image_name"dockedahi:…...

编程日记 2025/7/6 12:20:09

SpringBoot项目集成MinIO

最近在学习MinIO&#xff0c;所以想让自己的SpringBoot项目集成MinIO,在网上查阅资料&#xff0c;并进行操作的过程中遇到一些问题&#xff0c;所以想把自己遇到的坑和完成步骤记录下来供自己和各位查阅。 一. MinIO的下载安装以及基本使用 1. 下载地址&#xff1a;https://d…...

编程日记 2025/7/12 5:57:32

【Flutter】常用样式、方法、组件（长期更新中）

一、样式设置 设置颜色透明度&#xff1a;color: Color(0xff4B9E32).withOpacity(0.08) 二、常用方法 数组排序&#xff1a;list.sort(); **升序**&#xff1a;(obj1, obj2) > obj1.compareTo(obj2) **降序**&#xff1a;(obj1, obj2) > obj2.compareTo(obj1)obj1.co…...

编程日记 2025/7/14 10:49:30

dbus接口方法的variant类型传参详解

python实现c++中so库调用及dbus服务开发-CSDN博客 之前写的这篇博文介绍了如何创建一个dbus服务，但是注册的接口方法的入参还是比较简单的，实际上dbus的参数类型有很多种，调用方式也有多种，我们来逐一介绍下。 其实基础数据类型，如字符串、整型、浮点型、布尔型等大多数…...

编程日记 2025/7/13 22:24:44

【时时三省】（NIT计算机考试）Word的使用方法

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 一、软件简介 Microsoft Word&#xff0c;简称Word&#xff0c;是微软公司开发的一款文字处理软件&#xff0c;广泛应用于文档编辑、排版、打印等领域。无论是撰写论文、报告、简历&#xf…...

编程日记 2025/7/14 21:22:07

spring技术点

引入对象 Autowired 和 Resource的区别 Autowired 和 Resource的区别 valid 参数校验 jarkata进行SpringMVC校验 常规当前进行校验的配置操作&#xff0c;参考文档如下进行操作。 SpringMVC校验注解不生效 List类型参数校验 由于list类型默认不能进行标注校验实现&#x…...

编程日记 2025/7/4 5:54:12

工业—使用Flink处理Kafka中的数据_ChangeRecord1

使用 Flink 消费 Kafka 中 ChangeRecord 主题的数据，当某设备 30 秒状态连续为 “ 预警 ” ，输出预警 信息。当前预警信息输出后，最近30...

编程日记 2025/7/3 13:45:03

实验日志——DETR

DETR训练日志 1. 代码来源 代码源自作者的Github: https://github.com/facebookresearch/detr?tabreadme-ov-file 2. 数据来源 在DETR中只使用了COCO2017数据集&#xff0c;其中训练集有118288张图像&#xff0c;验证集有5001张数据&#xff0c;测试集有40671张数据&#…...

编程日记 2025/7/12 15:58:17

前端常用缓存技术深度剖析

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2025/6/28 19:59:17

汽车IVI中控开发入门及进阶（三十七）：基于HFP协议的蓝牙电话

概述： HFP全称Hands-free Profile，是一款让蓝牙设备控制电话的软件，多用于汽车上。此类设备最常见的例子是车载免提装置与蜂窝电话或可穿戴无线耳机一起使用。该配置文件定义了支持免提配置文件的两个设备如何在点对点的基础上相互交互。免提模式的实现通常使耳机或嵌入式免…...

编程日记 2025/7/12 6:24:14

分布式系统架构1：共识算法Paxos

1.背景 今天开始更新分布式的文章&#xff0c;工作几年后还没系统的学习分布式的内容&#xff0c;趁着还有时间学习沉淀的时候多输出些文章 2.为什么需要分布式共识算法 思考&#xff1a;现在你有一份随时变动的数据&#xff0c;需要确保它正确存储在网络的几台不同机器上&a…...

编程日记 2025/7/13 22:17:11

大语言模型应用Text2SQL本地部署实践初探

自从两年前OpenAI公司发布ChatGPT后&#xff0c;大模型(Large Language Model&#xff0c;简称LLM)相关技术在国内外可谓百家争鸣&#xff0c;遍地开花&#xff0c;在传统数据挖掘、机器学习和深度学习的基础上&#xff0c;正式宣告进入快速发展的人工智能(Artificial Intellig…...

编程日记 2025/7/14 11:52:21

C# WPF抽奖程序

C# WPF抽奖程序 using Microsoft.Win32; using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using System.Linq; using System.Text; using System.Threading; using System.Threading.Tasks; using System.Windows; using System.…...

编程日记 2025/7/14 5:43:54

linux运维命令

防火墙相关命令 防火墙规则查看 firewall-cmd --list-all 禁ping firewall-cmd --permanent --add-rich-rulerule protocol valueicmp drop firewall-cmd --reload 执行完以上命令后&#xff0c;通过firewall-cmd --list-all查看规则生效情况 firewall-cmd --list-all 其…...

编程日记 2025/7/13 6:02:39

环境兼容： Vue3+ELement-plus

题目&#xff1a;环境兼容&#xff1a; Vue3ELement-plus 前言 身为小白的我也在负责一个项目咯&#xff0c;开发的是Vue3项目&#xff0c;然后就搜阅多篇文章&#xff0c;整理了这个。内容很多是转载的&#xff0c;拼成的我这个文章。 Element-plus简介 Element-plus 是基于…...

编程日记 2025/7/14 13:20:03

解决 PyTorch 中的 AttributeError: ‘NoneType‘ object has no attribute ‘reshape‘ 错误

这里写目录标题 一、错误分析二、错误原因三、解决方案1. 检查损失函数2. 检查前向传播3. 检查 backward 函数4. 检查梯度传递 四、前向传播与反向传播1. 前向传播2. 反向传播3. 自定义 backward 函数示例反向传播过程&#xff1a;常见的错误&#xff1a;1&#xff1a;损失函数…...

编程日记 2025/7/7 17:29:41

Unity 设计模式-命令模式（Command Pattern）详解

命令模式&#xff08;Command Pattern&#xff09;是一种行为型设计模式&#xff0c;它将请求封装成对象&#xff0c;从而使得可以使用不同的请求、队列或日志请求&#xff0c;以及支持可撤销的操作。命令模式通常包含四个主要角色&#xff1a;命令&#xff08;Command&#xf…...

编程日记 2025/7/10 5:20:18

如何解决maven项目使用Ctrl + /添加注释时的顶格问题

一、问题描述 相信后端开发的程序员一定很熟悉IDEA编译器和Maven脚手架&#xff0c;使用IDEA新建一个Maven工程&#xff0c;通过SpringBoot快速构建Spring项目。在Spring项目pom.xml文件中想添加注释&#xff0c;快捷键Ctrl /&#xff0c;但是总是顶格书写。 想保证缩进统一…...

编程日记 2025/7/14 13:35:20

网络安全信息收集（总结）更新

目录 重点&#xff1a; 前言&#xff1a; 又学到了&#xff0c;就是我们什么时候要子域名收集&#xff0c;什么时候收集域名&#xff0c;重点应该放前面 思考&#xff1a; 信息收集分为哪几类&#xff0c;什么是主域名&#xff0c;为什么要收集主域名&#xff0c;为什么要收…...

编程日记 2025/7/14 12:15:10

微服务-seata分布式事务

1.简述 1.1.什么是分布式事务 事务&#xff1a;是应用程序中一系列严密的操作&#xff0c;所有操作必须成功完成&#xff0c;要么全部失败&#xff0c;ACID 特性。本地事务&#xff1a;关系型数据库中,由一组SQL组成的一个执行单元,该单元要么整体成功,要么整体失败&#xff…...

编程日记 2025/7/9 17:39:11

（亲测好用）YOLO格式txt数据集转COCO格式json

1、数据集结构形式 YOLO格式数据集&#xff1a; b文件夹下有images和labels两个文件夹&#xff0c;分别存放图片和标签格式的数据。 两个文件夹下分别有train、val、test三个文件夹&#xff0c;里面存放对应的数据。 COCO数据集格式&#xff1a; COCO格式数据文件夹下有三个…...

编程日记 2025/7/14 18:48:51

LVS的DR模式是否依赖内核的数据包转发

LVS的DR模式是否依赖内核的数据包转发 是的&#xff0c;LVS&#xff08;Linux Virtual Server&#xff09; 的 DR&#xff08;Direct Routing&#xff09;模式 依赖于 内核的数据包转发。在 DR 模式下&#xff0c;数据包的转发行为是由 Linux 内核进行的&#xff0c;因此正确配…...

编程日记 2025/7/14 16:25:43

沿着数组的指定轴对每行(列)应用一个函数np.apply_along_axis

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 沿着数组的指定轴 对每行(列)应用一个函数 np.apply_along_axis [太阳]选择题 根据题目代码&#xff0c;执行的结果是&#xff1f; import numpy as np array np.array([[1, 2, 3],…...

编程日记 2025/7/13 16:47:53

BEPUphysicsint定点数3D物理引擎使用

原文&#xff1a;BEPUphysicsint定点数3D物理引擎使用 - 哔哩哔哩 上一节給大家介绍了BEPUphysicsint的一些基本的情况&#xff0c;这节课我们来介绍它的基本使用,本节主要从以下5个方面来介绍: (1) 创建一个物理世界Space&#xff0c;并开启模拟迭代; (2) 添加一个物理物体…...

编程日记 2025/7/13 7:21:10

LinuxUDP编程

由于UDP是无连接、尽力传输的&#xff0c;所以Server端绑定完IP、端口号后&#xff0c;使用recvfrom可以阻塞等待客户端的数据&#xff0c;而且Client端通过sendto发送的数据包直接发送到互联网&#xff08;也是基于IP、端口号&#xff09;这种操作是不担保Server端是否收到的&…...

编程日记 2025/7/11 1:05:45

Elasticsearch vs 向量数据库:寻找最佳混合检索方案

图片来自Shutterstock上的Bakhtiar Zein 多年来&#xff0c;以Elasticsearch为代表的基于全文检索的搜索方案&#xff0c;一直是搜索和推荐引擎等信息检索系统的默认选择。但传统的全文搜索只能提供基于关键字匹配的精确结果&#xff0c;例如找到包含特殊名词“Python3.9”的文…...

编程日记 2025/7/12 19:23:11

Android显示系统（07）- OpenGL ES - 纹理Texture

Android显示系统&#xff08;02&#xff09;- OpenGL ES - 概述 Android显示系统&#xff08;03&#xff09;- OpenGL ES - GLSurfaceView的使用 Android显示系统&#xff08;04&#xff09;- OpenGL ES - Shader绘制三角形 Android显示系统&#xff08;05&#xff09;- OpenGL…...

编程日记 2025/7/13 17:53:19

C#加速Bitmap存图

如果希望大幅提高图像保存速度&#xff0c;特别是在处理非常大的图像时&#xff0c;可以尝试以下更直接、更高效的方法&#xff1a; 1. 避免使用 Bitmap 类的 Save 方法 Bitmap.Save 方法的速度受限于 GDI 库的操作&#xff0c;尤其是对于非常大的图像&#xff0c;它可能会经历…...

编程日记 2025/7/9 9:49:10

打通Vue3+Flask（python3）+Mysql-实现简单数据交互

一、需要准备的工具 下载python3&#xff0c;Vscode&#xff0c;pycharm&#xff08;这里用的社区版&#xff09;&#xff0c;phpstudy_pro&#xff0c;Node.js&#xff08;建议下载长期支持版本&#xff0c;版本不宜过低&#xff0c;比如18,20&#xff09;&#xff0c;Vue.js…...

编程日记 2025/7/12 0:00:54

PT8M2102 触控型 8Bit MCU

1 产品概述 ● PT8M2102 是一款基于 RISC 内核的8位 MTP 单片机&#xff0c;内部集成了电容式触摸感应模块、TIMER&#xff0c;PWM、LVR、LVD、WDT等外设&#xff0c;其主要用作触摸按键开关&#xff0c;广泛适用于触控调光、电子玩具、消费电子、家用电器等领域&#xff0c;具…...

编程日记 2025/7/13 6:35:35

【PyQt5教程 一】Qt Designer 安装及其使用方法说明，附程序源码

目录 一、PyQt5介绍&#xff1a; &#xff08;1&#xff09;PyQt简介&#xff1a; &#xff08;2&#xff09;PyQt API&#xff1a; &#xff08;3&#xff09;支持的环境&#xff1a; &#xff08;4&#xff09;安装&#xff1a; &#xff08;5&#xff09;配置环境变量…...

编程日记 2025/7/14 13:52:00

Spark on Yarn安装配置,大数据技能竞赛（容器环境）

Spark on Yarn模式&#xff0c;即把Spark作为一个客户端&#xff0c;将作业提交给Yarn服务&#xff0c;由于在生产环境中&#xff0c;很多时候都要与Hadoop使用同一个集群&#xff0c;因此采用Yarn来管理资源调度&#xff0c;可以有效提高资源利用率。 环境说明&#xff1a; 服…...

编程日记 2025/7/12 10:30:31

★ 数据结构 ★ 排序

Ciallo&#xff5e;(∠・ω< )⌒☆ ~ 今天&#xff0c;我将和大家一起学习数据结构中的各种排序~ ​❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️ 澄岚主页&#xff1a;椎名澄嵐-CSDN博客 数据结构专栏&#xff1a;https://blog.csdn.net/2302_80328146/categ…...

编程日记 2025/7/14 12:10:19

数据结构 （26）图的遍历

前言 数据结构中的图遍历是指从图中的任一顶点出发&#xff0c;按照某种方法访问图中的所有顶点&#xff0c;且每个顶点只访问一次。 一、遍历方法 遍历主要有两种方法&#xff1a;深度优先搜索&#xff08;DFS&#xff09;和广度优先搜索&#xff08;BFS&#xff09;。 1.深度…...

编程日记 2025/7/14 20:51:47

用vue框架写一个时钟的页面

你可以使用Vue框架来创建一个简单的时钟页面。首先&#xff0c;你需要在HTML文件中引入Vue框架的CDN&#xff1a; <script src"https://cdn.jsdelivr.net/npm/vue"></script>然后&#xff0c;创建一个包含时钟功能的Vue实例&#xff1a; <div id&qu…...

编程日记 2025/7/12 13:48:30

【Android】View的工作流程——measure

1.View的工作流程入口 1.1DecorView被加载到Window中 看到这里你对Activity的构成有一定的了解&#xff0c;每个 Activity 都有一个与之关联的 Window 对象&#xff0c;而 DecorView 是这个 Window 的根视图。当DecorView被创建以及加载资源的时候&#xff0c;此时它的内容还…...

编程日记 2025/7/10 15:05:20