React中useState的setState方法请求了好多次
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()的方法一直不断的被调用,网页一直请求,根本停不下来了。 2、产生原因 要弄明白这个原因,首先要先了解一下react生命周期。 react是组件式的编程,一…...
【MYSQL基础】基础命令介绍
基础命令 MYSQL注释方式 -- 单行注释/* 多行注释 哈哈哈哈哈 哈哈哈哈 */连接数据库 mysql -u root -p12345678退出数据库连接 使用exit;命令可以退出连接 查询MYSQL版本 mysql> select version(); ----------- | version() | ----------- | 8.0.27 | ----------- 1…...
多元回归预测 | Matlab基于灰狼算法优化深度置信网络(GWO-DBN)的数据回归预测,matlab代码回归预测,多变量输入模型
文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元回归预测 | Matlab基于灰狼算法优化深度置信网络(GWO-DBN)的数据回归预测,matlab代码回归预测,多变量输入模型,matlab代码回归预测,多变量输入模型,多变量输入模型 评价指标包括:MAE、RMSE和R2等,代码质…...
校园wifi网页认证登录入口
很多校园wifi网页认证登录入口是1.1.1.1 连上校园网在浏览器写上http://1.1.1.1就进入了校园网 使 用 说 明 一、帐户余额 < 0.00元时,帐号被禁用,需追加网费。 二、在计算中心机房上机的用户,登录时请选择新建帐号时给您指定的NT域&…...
[SpringBoot]Spring Security框架
目录 关于Spring Security框架 Spring Security框架的依赖项 Spring Security框架的典型特征 关于Spring Security的配置 关于默认的登录页 关于请求的授权访问(访问控制) 使用自定义的账号登录 使用数据库中的账号登录 关于密码编码器 使用BCry…...
Unity 之 抖音小游戏本地数据最新存储方法分享
Unity 之 抖音小游戏本地数据最新存储方法分享 一、抖音小游戏文件存储系统背景二、文件存储系统的使用方法2.1 初始化2.1 创建目录2.3 存储数据2.4 删除目录/文件2.5 其他相关操作 三,小结 抖音小游戏是一种基于抖音平台开发的小型游戏,与传统的 APP 不…...
逍遥自在学C语言 | 函数初级到高级解析
前言 函数是C语言中的基本构建块之一,它允许我们将代码组织成可重用、模块化的单元。 本文将逐步介绍C语言函数的基础概念、参数传递、返回值、递归以及内联函数和匿名函数。 一、人物简介 第一位闪亮登场,有请今后会一直教我们C语言的老师 —— 自在…...
Elastic 推出 Elastic AI 助手
作者:Mike Nichols Elastic 推出了 Elastic AI Assistant,这是一款由 ESRE 提供支持的开放式、生成式 AI 助手,旨在使网络安全民主化并支持各种技能水平的用户。 最近发布的 Elasticsearch Relevance Engine™ (ESRE™) 提供了用于创建高度相…...
【数据库】MySQL安装(最新图文保姆级别超详细版本介绍)
1.总共两部分(第二部可省略) 安装mysql体验mysql环境变量配置 1.1安装mysql 1.输入官网地址https://www.mysql.com/ 下载完成后,我们双击打开我们的下载文件 打开后的界面,如图所示 我们选择custom,点击nex…...
前端使用pdf-lib库实现pdf合并,window.open预览合并后的pdf
最近出差开了好多发票,写了一个pdf合并网站,用于把多张发票pdf合并成一张,方便打印 使用pdf-lib这个库实现的pdf合并功能,预览使用的是浏览器自身查看pdf功能 源码 网页地址 https://zqy233.github.io/PDF-merge/ <!DOCTYPE h…...
计算机网络相关知识点总结(二)
比特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 分别对应以下…...
Redmine与Gitlab整合(实战版)
网上查了很多文章,总结一下。 安装过程略。可参考:(84条消息) Redmine与Gitlab功能集成_redmine gitlab_羽之大公公的博客-CSDN博客 配置集成的方法,参考: Redmine与GitLab集成 (ngui.cc) 修改ssh-key密码的方法,参…...
(3)深度学习学习笔记-简单线性模型
文章目录 一、线性模型二、实例1.pytorch求导功能2.简单线性模型(人工数据集) 来源 一、线性模型 一个简单模型:假设一个房子的价格由卧室、卫生间、居住面积决定,用x1,x2,x3表示。 那么房价y就可以认为yw…...
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…...
spring工程的启动流程?bean的生命周期?提供哪些扩展点?管理事务?解决循环依赖问题的?事务传播行为有哪些?
1.Spring工程的启动流程: Spring工程的启动流程主要包括以下几个步骤: 加载配置文件:Spring会读取配置文件(如XML配置文件或注解配置)来获取应用程序的配置信息。实例化并初始化IoC容器:Spring会创建并初…...
使用 Zabbix 监控 RocketMQ列举监控项和触发器
在使用 Zabbix 监控 RocketMQ 的过程中,以下是一些可能的监控项和触发器: 监控项 集群总体健康状况生产者和消费者的连接数量Broker 的状态消息的生产和消费速度队列深度(即队列中的消息数量)磁盘空间使用内存使用CPU使用网络流…...
uniApp:路由与页面跳转及传参
方式一:声明式导航 声明式导航,通过组件进行跳转。官方文档:详情 使用 navigator 组件进行页面跳转。 属性类型默认值说明urlString应用内的跳转链接,值为相对路径或绝对路径,如:“…/first/first”&#x…...
Java中操作文件(二)
目录 一、什么是数据流 二、InputStream概述 2.1、方法 2.2、说明 三、FileInputStream概述 3.1、构造方法 3.2、利用Scanner进行字符串读取,简化操作 四、OutputStream概述 4.1、方法 4.2、PrinterWriter简化写操作 五、小程序练习 示例1 示例…...
springboot+vue在线考试系统(java项目源码+文档)
风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的在线考试系统。项目源码以及部署相关请联系风歌,文末附上联系信息 。 💕💕作者:风歌&a…...
样式方案:在 Vite 中接入现代化的 CSS 工程化方案
上一小节,我们使用 Vite 初始化了一个 Web 项目,迈出了使用 Vite 的第一步。但在实际工作中,仅用 Vite 官方的脚手架项目是不够的,往往还需要考虑诸多的工程化因素,借助 Vite 本身的配置以及业界的各种生态,…...
AI专著写作快车道:特色工具大集合,助力科研成果出版
学术专著写作困境与AI工具助力 学术专著的写作并不只是简单的“写出来”,更在于能否顺利“出版、得到认可”。在当前的出版市场,学术专著的受众本就相对有限,因此出版社对学术价值和作者的影响力要求非常高。许多作者虽然完成了初稿…...
告别兼容性问题:手把手教你用canvas和base64转换TIFF图片
前端工程师必备:TIFF图片处理全攻略与实战解决方案 在当今数字内容爆炸式增长的时代,图片处理已成为前端开发中不可或缺的一环。作为专业开发者,我们经常需要面对各种图片格式的兼容性问题,其中TIFF(Tagged Image Fil…...
开源字体实用指南:Poppins字体家族的全方位应用策略
开源字体实用指南:Poppins字体家族的全方位应用策略 【免费下载链接】Poppins Poppins, a Devanagari Latin family for Google Fonts. 项目地址: https://gitcode.com/gh_mirrors/po/Poppins 价值定位:如何让开源字体成为项目的视觉资产&#x…...
进程间通信(IPC):原理、场景与选型
在操作系统的世界里,进程是程序运行的基本单元,每个进程都拥有独立的内存空间和资源,彼此之间相互隔离,无法直接访问对方的数据。这种隔离机制保证了系统的稳定性,避免进程间相互干扰,但也带来了一个问题&a…...
GPEN肖像增强使用技巧:自然、强力、细节三种模式适用场景解析
GPEN肖像增强使用技巧:自然、强力、细节三种模式适用场景解析 1. 认识GPEN的三种处理模式 GPEN作为当前最先进的肖像增强工具之一,其核心价值在于提供了三种差异化的处理模式:自然、强力和细节。这三种模式不是简单的强度差异,而…...
SmolVLA开发环境搭建:从操作系统安装到模型运行的完整路径
SmolVLA开发环境搭建:从操作系统安装到模型运行的完整路径 如果你刚拿到一台新电脑,或者想把旧机器彻底清理干净,从头开始搭建一个能跑SmolVLA模型的环境,那这篇文章就是为你准备的。很多教程都假设你已经有了一个可用的系统&…...
DanKoe 视频笔记:创作者指南:如何摆脱新手地狱
在本教程中,我们将学习创作者如何突破最初的停滞期,即所谓的“新手地狱”。我们将探讨导致这一困境的核心原因,并提供一系列具体、可操作的策略,帮助你建立权威、创作吸引人的内容、有效建立网络,并最终构建可持续的个…...
从零开始:使用VSCode + CMake + Ninja + GCC构建高效MCU开发环境
1. 为什么需要这套开发环境? 作为一名在嵌入式领域摸爬滚打多年的开发者,我深知传统IDE的痛点。记得刚入行时,公司清一色使用某商业IDE,直到某天收到法务部的紧急通知——需要立即处理软件版权问题。这让我意识到,基于…...
3个维度解析G-Helper:华硕笔记本性能优化的轻量级解决方案
3个维度解析G-Helper:华硕笔记本性能优化的轻量级解决方案 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目…...
5分钟快速部署!终极开源邮件营销平台BillionMail完全指南 [特殊字符]
5分钟快速部署!终极开源邮件营销平台BillionMail完全指南 🚀 【免费下载链接】BillionMail Billion Mail is a future open-source email marketing platform designed to help businesses and individuals manage their email campaigns with ease 项…...
