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

React中useState的setState方法请求了好多次

news 2025/12/28 10:16:01

1、问题描述

        最近在写react的时候碰到了一个很奇怪的问题。

 

         可以看到那个getXXX()的方法一直不断的被调用，网页一直请求，根本停不下来了。

2、产生原因

        要弄明白这个原因，首先要先了解一下react生命周期。

        react是组件式的编程，一个react项目启动以后，先是会加载好网页的DOM结构

         所谓的DOM结构，其实就是常见的一些web标签，比如<html>、<body>这些。就是绘制一个网页的基本框架。

         网页的DOM结构加载完以后，再去渲染react组件到页面上去（Mounting挂载阶段，把组件插入真实DOM）。调用了setState（useState的setState）后，就到了第二个Updating更新重新渲染(render)阶段。setState请求了好多次就是发生在Updating更新阶段。

        因为我是想在第一次打开这个页面的时候，就从后端请求数据，并把返回的数据渲染到页面上去，根据代码是顺序执行的，代码从上往下顺序执行，执行到getXXX()这个方法的时候，会请求后端以及渲染数据。但问题就出现在这里，getXXX()方法会被不断的调用！因为每次setState()的时候都会重新render一次页面（异步过程），于是整个页面的代码又会从头到尾执行一次。相当于每次render都会顺序把getXXX()里面的代码都顺序执行一下，每次render都又加了新的setState，然后无限嵌套，递归的这种......

3、解决方法

        注：因为不方便直接贴公司的代码，这里我就用自己写的Demo了。

3.1、使用useEffect函数

        在listAllPeople()方法外面再加一层方法getData()，在useEffect里面调用getData()，并把useEffect的第二个参数为[ ]，表示只在第一次render的时候调用一下。

const getData=()=>{//get请求无参数listAllPeople().then((response) => {const result = response.data;console.log(response);console.log(result);setpeopleDTOList(result.PeopleDTOList);console.log(peopleDTOList)});
};useEffect(() => {getData();
}, []);

         然后你会发现，useEffect()调用了两次getData()方法，这是由于严格模式下为了确保请求响应成功，所以特地多执行了一次useEffect。当然如果你不想请求两次的话，也可以取消严格模式。找到入口页面的<React.StrictNode>并删除就退出严格模式了。

         退出严格模式后，useEffect就只执行了一次了。

4、总结

        无

5、参考资料

React useEffect 两个参数你用对了吗 - 掘金

react 严格模式（控制台调用两次问题）_使用react.strictmode,接口调用两次_轻狂的书生的博客-CSDN博客

使用 Effect Hook – React (reactjs.org)

Hook 简介 – React (reactjs.org)

react 严格模式（控制台调用两次问题）_使用react.strictmode,接口调用两次_轻狂的书生的博客-CSDN博客 react关闭严格模式-掘金 (juejin.cn)

react 严格模式（控制台调用两次问题）_使用react.strictmode,接口调用两次_轻狂的书生的博客-CSDN博客

防止 React 触发 useEffect 两次 - 知乎 (zhihu.com)

useEffect – React

深入详解React生命周期 - 掘金 (juejin.cn)

React 组件生命周期 | 菜鸟教程 (runoob.com)

HTML DOM 教程 | 菜鸟教程 (runoob.com)

相关文章：

React中useState的setState方法请求了好多次

1、问题描述 最近在写react的时候碰到了一个很奇怪的问题。 可以看到那个getXXX()的方法一直不断的被调用&#xff0c;网页一直请求&#xff0c;根本停不下来了。 2、产生原因 要弄明白这个原因&#xff0c;首先要先了解一下react生命周期。 react是组件式的编程&#xff0c;一…...

编程日记 2023/7/6 2:18:02

【MYSQL基础】基础命令介绍

基础命令 MYSQL注释方式 -- 单行注释/* 多行注释 哈哈哈哈哈 哈哈哈哈 */连接数据库 mysql -u root -p12345678退出数据库连接 使用exit;命令可以退出连接 查询MYSQL版本 mysql> select version(); ----------- | version() | ----------- | 8.0.27 | ----------- 1…...

编程日记 2023/7/6 1:44:41

多元回归预测 | Matlab基于灰狼算法优化深度置信网络(GWO-DBN)的数据回归预测，matlab代码回归预测，多变量输入模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元回归预测 | Matlab基于灰狼算法优化深度置信网络(GWO-DBN)的数据回归预测，matlab代码回归预测，多变量输入模型，matlab代码回归预测，多变量输入模型，多变量输入模型 评价指标包括:MAE、RMSE和R2等，代码质…...

编程日记 2023/7/6 1:11:20

校园wifi网页认证登录入口

很多校园wifi网页认证登录入口是1.1.1.1 连上校园网在浏览器写上http://1.1.1.1就进入了校园网 使 用 说 明 一、帐户余额 < 0.00元时&#xff0c;帐号被禁用&#xff0c;需追加网费。 二、在计算中心机房上机的用户&#xff0c;登录时请选择新建帐号时给您指定的NT域&…...

编程日记 2023/7/6 0:37:59

[SpringBoot]Spring Security框架

目录 关于Spring Security框架 Spring Security框架的依赖项 Spring Security框架的典型特征 关于Spring Security的配置 关于默认的登录页 关于请求的授权访问&#xff08;访问控制&#xff09; 使用自定义的账号登录 使用数据库中的账号登录 关于密码编码器 使用BCry…...

编程日记 2023/7/6 0:04:38

Unity 之 抖音小游戏本地数据最新存储方法分享

Unity 之 抖音小游戏本地数据最新存储方法分享 一、抖音小游戏文件存储系统背景二、文件存储系统的使用方法2.1 初始化2.1 创建目录2.3 存储数据2.4 删除目录/文件2.5 其他相关操作 三&#xff0c;小结 抖音小游戏是一种基于抖音平台开发的小型游戏&#xff0c;与传统的 APP 不…...

编程日记 2023/7/5 23:31:16

逍遥自在学C语言 | 函数初级到高级解析

前言 函数是C语言中的基本构建块之一&#xff0c;它允许我们将代码组织成可重用、模块化的单元。 本文将逐步介绍C语言函数的基础概念、参数传递、返回值、递归以及内联函数和匿名函数。 一、人物简介 第一位闪亮登场&#xff0c;有请今后会一直教我们C语言的老师 —— 自在…...

编程日记 2023/7/5 22:57:55

Elastic 推出 Elastic AI 助手

作者&#xff1a;Mike Nichols Elastic 推出了 Elastic AI Assistant&#xff0c;这是一款由 ESRE 提供支持的开放式、生成式 AI 助手&#xff0c;旨在使网络安全民主化并支持各种技能水平的用户。 最近发布的 Elasticsearch Relevance Engine™ (ESRE™) 提供了用于创建高度相…...

编程日记 2023/7/5 22:24:34

【数据库】MySQL安装（最新图文保姆级别超详细版本介绍）

1.总共两部分&#xff08;第二部可省略&#xff09; 安装mysql体验mysql环境变量配置 1.1安装mysql 1.输入官网地址https://www.mysql.com/ 下载完成后&#xff0c;我们双击打开我们的下载文件 打开后的界面&#xff0c;如图所示 我们选择custom&#xff0c;点击nex…...

编程日记 2023/7/5 21:51:13

前端使用pdf-lib库实现pdf合并，window.open预览合并后的pdf

最近出差开了好多发票&#xff0c;写了一个pdf合并网站&#xff0c;用于把多张发票pdf合并成一张&#xff0c;方便打印 使用pdf-lib这个库实现的pdf合并功能&#xff0c;预览使用的是浏览器自身查看pdf功能 源码 网页地址 https://zqy233.github.io/PDF-merge/ <!DOCTYPE h…...

编程日记 2023/7/5 21:17:51

计算机网络相关知识点总结（二）

比特bit是计算机中数据量的最小单位,可简记为b。字节Byte也是计算机中数据量的单位,可简记为B,1B8bit。常用的数据量单位还有kB、MB、GB、TB等,其中k、M、G、T的数值分别为 2 10 2^{10} 210, 2 20 2^{20} 220, 2 30 2^{30} 230, 2 40 2^{40} 240。 K, M, G, T 分别对应以下…...

编程日记 2023/7/5 20:44:30

Redmine与Gitlab整合（实战版）

网上查了很多文章&#xff0c;总结一下。 安装过程略。可参考&#xff1a;(84条消息) Redmine与Gitlab功能集成_redmine gitlab_羽之大公公的博客-CSDN博客 配置集成的方法&#xff0c;参考&#xff1a; Redmine与GitLab集成 (ngui.cc) 修改ssh-key密码的方法&#xff0c;参…...

编程日记 2023/7/5 20:11:09

（3）深度学习学习笔记-简单线性模型

文章目录 一、线性模型二、实例1.pytorch求导功能2.简单线性模型&#xff08;人工数据集&#xff09; 来源 一、线性模型 一个简单模型&#xff1a;假设一个房子的价格由卧室、卫生间、居住面积决定&#xff0c;用x1&#xff0c;x2&#xff0c;x3表示。 那么房价y就可以认为yw…...

编程日记 2023/7/5 19:37:48

pytorch3d 安装报错 RuntimeError: Not compiled with GPU support pytorch3d

安装环境 NVIDIA GeForce RTX 3090 cuda 11.3 python 3.8.5 torch 1.11.0 torchvision 0.12.0 环境安装命令 conda install pytorch1.11.0 torchvision0.12.0 torchaudio0.11.0 cudatoolkit11.3 -c pytorch安装pytorch3d参考官网链接 https://github.com/facebookresearch/p…...

编程日记 2023/7/5 19:04:27

spring工程的启动流程？bean的生命周期？提供哪些扩展点？管理事务？解决循环依赖问题的？事务传播行为有哪些？

1.Spring工程的启动流程&#xff1a; Spring工程的启动流程主要包括以下几个步骤&#xff1a; 加载配置文件&#xff1a;Spring会读取配置文件&#xff08;如XML配置文件或注解配置&#xff09;来获取应用程序的配置信息。实例化并初始化IoC容器&#xff1a;Spring会创建并初…...

编程日记 2023/7/5 18:31:06

使用 Zabbix 监控 RocketMQ列举监控项和触发器

在使用 Zabbix 监控 RocketMQ 的过程中&#xff0c;以下是一些可能的监控项和触发器&#xff1a; 监控项 集群总体健康状况生产者和消费者的连接数量Broker 的状态消息的生产和消费速度队列深度&#xff08;即队列中的消息数量&#xff09;磁盘空间使用内存使用CPU使用网络流…...

编程日记 2023/7/5 17:57:45

uniApp：路由与页面跳转及传参

方式一&#xff1a;声明式导航 声明式导航&#xff0c;通过组件进行跳转。官方文档&#xff1a;详情 使用 navigator 组件进行页面跳转。 属性类型默认值说明urlString应用内的跳转链接&#xff0c;值为相对路径或绝对路径&#xff0c;如&#xff1a;“…/first/first”&#x…...

编程日记 2023/7/5 17:24:24

Java中操作文件(二)

目录 一、什么是数据流 二、InputStream概述 2.1、方法 2.2、说明 三、FileInputStream概述 3.1、构造方法 3.2、利用Scanner进行字符串读取&#xff0c;简化操作 四、OutputStream概述 4.1、方法 4.2、PrinterWriter简化写操作 五、小程序练习 示例1 示例…...

编程日记 2023/7/5 16:51:03

springboot+vue在线考试系统（java项目源码+文档）

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的在线考试系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 &#x1f495;&#x1f495;作者&#xff1a;风歌&a…...

编程日记 2023/7/5 16:17:42

样式方案：在 Vite 中接入现代化的 CSS 工程化方案

上一小节&#xff0c;我们使用 Vite 初始化了一个 Web 项目&#xff0c;迈出了使用 Vite 的第一步。但在实际工作中&#xff0c;仅用 Vite 官方的脚手架项目是不够的&#xff0c;往往还需要考虑诸多的工程化因素&#xff0c;借助 Vite 本身的配置以及业界的各种生态&#xff0c…...

编程日记 2023/7/5 15:44:21

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/12/12 21:35:24

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/11/4 22:48:45

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

编程新知 2025/12/28 6:59:17

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

编程新知 2025/12/25 1:15:59

医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...

编程新知 2025/12/24 22:02:23

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/10/1 4:57:11