React中StrictMode严格模式,导致开发环境,接口会请求两次或多次( useEffect 请求多次)

问题描述:

我在用 create-react-app时,开发环境,一进页面接口会请求两次或多次。
我在首页 useEffect里 请求一个接口,整个页面就在这里请求这一次接口。但 实际上请求了两次。我检查了代码,确定只调用了一次,且我这个页面就是父组件。

useEffect(() => {// const location = useLocation();// const searchParams = new URLSearchParams(location.search);// const id = searchParams.get("fundCode");// console.log(id);// console.log(fundCode, "99");if (fundCode && fundCode !== "") {getBaseInfo({ fundCode: fundCode });} else {Toast.show({content: "参数错误",duration: 2000,position: "top",});console.log("错误");}}, []);

network 截图

解决方案:

后来经过查询资料,知道了,造成这个现象的原因:是因为使用了严格模式(React.StrictMode)造成的!
React 提供了 “严格模式”,在严格模式下开发时,它将会调用每个组件函数两次。通过重复调用组件函数,严格模式有助于找到违反这些规则的组件。
react 官网 严格模式
react 中文网 严格模式
react 严格模式

index.js
create-react-app 默认 index.js里使用严格模式!,把React.StrictMode 注释调即可。

需要注意的是 严格模式,只在开发环境生效,生产环境则不生效!不影响生产环境! 也就是说,你也可以 不做处理,如果你觉得开发环境请求两次不能接受,可以注释掉 index.js或者 App.js里的严格模式注释掉。

注释调

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/157969.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go 异常处理流程

在 Go 语言中,panic、recover 和 defer 是用于处理异常情况的关键字。它们通常一起使用来实现对程序错误的处理和恢复。 1. defer 语句 defer 用于在函数返回之前执行一段代码。被 defer 修饰的语句或函数会在包含 defer 的函数执行完毕后执行。defer 常用于资源清…

基于SSM 离退休管理平台-计算机毕设 附源码 52629

ssm离退休管理平台 摘 要 随着社会的发展,社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景,运用软件工程原理和开发方法,它主要是采用SSM技术和mysql数据库来完成对系统的…

上海站活动回顾 | 聚焦私募视野,助力量化投研交易

11月16日下午,DolphinDB 携手华金证券,在上海成功举办了 D-Day 私募行业交流会,为大家带来了详实的私募行业场景解析、功能介绍、案例分享及现场演示。三十余位来自私募机构的核心策略研发、量化交易员、数据分析专家们齐聚现场,深…

Rust生态系统:探索常用的库和框架

大家好!我是lincyang。 今天我们来探索Rust的生态系统,特别是其中的一些常用库和框架。 Rust生态系统虽然相比于一些更成熟的语言还在成长阶段,但已经有很多强大的工具和库支持各种应用的开发。 常用的Rust库和框架 Serde:一个…

计算机网络之概述

一、概述 1.1因特网概述 定义 网络(Network)由若干结点(Node)和连接这些结点的链路(Link)组成。多个网络还可以通过路由器互连起来,这样就构成了一个覆盖范围更大的网络,即互联网(或互连网)因此,互联网是“网络的网络…

Nginx解决跨域问题的一些想法

参考博客https://blog.csdn.net/agonie201218/article/details/112562252,https://blog.csdn.net/Zisson_no_error/article/details/119357629。都是写得非常很好的文章 重中之重:一定要长眼睛,带脑子 通过跨域访问的报错,看清楚…

【开源】基于Vue.js的高校学院网站的设计和实现

项目编号: S 020 ,文末获取源码。 \color{red}{项目编号:S020,文末获取源码。} 项目编号:S020,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 学院院系模块2.2 竞赛报名模块2.3 教…

软件工程--软件建模--结构化方法通俗语言总结(暴肝超详解)(包含数据流图、数据字典、ER图、结构化设计和优化......)

目录 结构化分析 数据流图DFD 定义数据字典 实体关系图(E-R图) 结构化设计 变换映射 事务映射 优化结构设计 实例分析 详细设计(过程设计) 结构化方法是一种系统化开发软件的方法,该方法基于模块化的思想&am…

nginx-编译安装-基础指令-信号

nginx 的编译与安装 nginx目录介绍 如果我们需要整合第三方模块,需要自己编译然此模块编译到nginx里面。apt和yum的安装只具有常用的基础功能。 下载nginx wget http://nginx.org/download/nginx-1.14.0.tar.gz/auto 目录 Changes 描述了一每个版本提供了那些特…

【JavaEE初阶】 JavaScript基础语法——贰

文章目录 🌲条件语句🚩if 语句🚩三元表达式🚩switch🚩循环语句🎈while 循环🎈continue🎈break🎈for 循环 🍀数组🚩创建数组🚩获取数组…

vue中使用echarts渐变柱状图 Cannot read properties of undefined (reading ‘graphic‘)解决方法

在使用渐变颜色时报错,Cannot read properties of undefined (reading ‘graphic’) echarts也下载了,引入了,就是报错,用不了new charts, 结果换了一个版本号就可以了,本来用的"echarts": "…

C++11的weak_ptr弱引用的智能指针

弱引用指针weak_ptr是用来监视shared_ptr的,不会使引用计数器加1,它不管理shared_ptr内部的指针,主要是为了监视shared_ptr的生命周期,更像是shared_ptr的一个助手。weak_ptr没有重载操作符*和->,因为它不共享指针&…

windows对话框

windows对话框有以下几种: HWND CreateDialogParamA([in, optional] HINSTANCE hInstance,[in] LPCSTR lpTemplateName,[in, optional] HWND hWndParent,[in, optional] DLGPROC lpDialogFunc,[in] LPARAM dwInitParam );HWND Cr…

软信天成:如何利用大数据提高客户体验?

当今社会,市场均势正在发生变化,消费者拥有更多的选择和更高的决定权,传统的市场营销技巧注重提高品牌认知度和吸引潜在客户,现在早已过时。经济不确定性弥漫,数字化转型仍是大多数企业的优先选择,新的竞争…

Go 学习

文章目录 Go 语言中的值类型Go 语言中的引用类型 指针的使用二、使用步骤 1.引入库2.读入数据总结 前言 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人…

记录一次hiveserver2和namenode进程宕掉的排查

背景 最近发现集群主节点总有进程宕机,定位了大半天才找到原因,分享一下 排查过程 查询hiveserver2和namenode日志,都是正常的,突然日志就不记录了,直到我重启之后又恢复工作了。 排查各种日志都是正常的&#xff0…

Vue3 插槽 v-slot

插槽 视频链接:尚硅谷vue-插槽章节 不使用插槽的情况下 结果: 1 默认插槽 在子组件中只能有一个 结果: 2 具名插槽 #b是v-slot:b 的缩写 顾名思义就是指着名字去插入 结果: 3 作用域插槽 可以传递数据的插槽&#…

分享一些简单的英语问候语

昨天和一个朋友聊天,他问我最近有没有某个国家的客户?我说只有一两个,都已经好久没有联系了,上一次问候还是在九月份。他说从十月底开始就收到很多来自当地的询盘,你不妨问下客户最近是否有新的需求? 于是…

python 实现蚁群算法(simpy带绘图)

这里使用了蚁群算法求解了旅行商问题,同时结合了simpy来绘图 选择下一个食物的函数为: probability[i] pheromone[self.now][self.not_to_foods[i]] ** pheromone_w (1 / distance[self.now][self.not_to_foods[i]]) ** distance_w 该条路概率权重该点…

idea pom导入net.sf.json的jar包失败

开始在pom.xml文件中加入依赖如下 <dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.2.3</version> </dependency> maven reload project后&#xff0c;项目一直报&#xff1a;…