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": "…

记录一次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 该条路概率权重该点…

排序算法--插入排序

实现逻辑 ① 从第一个元素开始,该元素可以认为已经被排序 ② 取出下一个元素,在已经排序的元素序列中从后向前扫描 ③如果该元素(已排序)大于新元素,将该元素移到下一位置 ④ 重复步骤③,直到找到已排序的元…

【数据结构】树与二叉树(十八):树的存储结构——Father链接结构、儿子链表链接结构

文章目录 5.1 树的基本概念5.1.1 树的定义5.1.2 森林的定义5.1.3 树的术语 5.2 二叉树5.3 树5.3.1 树的存储结构1. 理论基础2. 典型实例 5.3.2 Father链接结构a. 定义树节点结构b. 创建新节点c. 主函数d. 代码整合 5.3.3 儿子链表链接结构a. 定义树节点结构b. 创建新节点c. 添加…

为什么录屏没声音?实用技巧大放送!

录屏已成为我们在数字时代记录和分享内容的重要方式之一。但有时,您可能会遇到录制视频却没有声音的问题。这个问题可能出现在不同的录屏软件中,导致许多人感到疑惑。在本文中,我们将探讨为什么录屏没声音,并提供两种解决方案&…

C语言实现堆栈和队列(动态)

行路难!行路难!多歧路,今安在?长风破浪会有时,直挂云帆济沧海。————李白 一 .堆栈 1 什么是堆栈 堆栈是一种特殊的线性表,堆栈中的元素以及元素之间的逻辑关系和线性表完全相同。在操作上的差别是线性…

springboot+jsp+bootstrap+java问卷调查系统

系统功能需求包含业务需求和功能需求,系统功能需求分析是在了解用户习惯、开发人员技术和实力等各个因素的前提下,对其进行深入分析,了解系统基本需求后,基本功能如下: 本课题要求实现优质的问卷调查系统,就…