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

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

news 2026/2/9 6:39:26

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

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/11/28 2:51:33

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2026/1/30 13:40:43

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2026/1/31 8:08:07

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2026/2/5 3:41:42

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26