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

news/2024/7/15 20:13:30 标签: react.js, javascript, 前端

问题描述:

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

javascript">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.niftyadmin.cn/n/5196588.html

相关文章

向量数据库——AI时代的基座

1.前言 向量数据库在构建基于大语言模型的行业智能应用中扮演着重要角色。大模型虽然能回答一般性问题,但在垂直领域服务中,其知识深度、准确度和时效性有限。为了解决这一问题,企业可以利用向量数据库结合大模型和自有知识资产,…

Tomcat 启动 HTTP状态 404 - 未找到

Tomcat 启动 HTTP状态 404 - 未找到 tomcat启动的项目访问地址实际是根据应用程序上下文的目录来决定的,而不是服务器那边配置的URL的地址来决定的

Python的requests库:解决文档缺失问题的策略与实践

在Python的requests库中,有一个名为ALL_PROXY的参数,但是该参数的文档并未进行详细的描述。这使得用户在使用该参数时可能会遇到一些问题,例如不知道如何正确地配置和使用该参数。 解决方案 针对这个问题,我们可以采取以下几种解…

数据资产入表,给企业带来的机遇和挑战

作为推动数字经济发展的核心要素,近年来,数据资源对于企业特别是相关数据企业的价值和作用正日益凸显。 数据资产入表之后,能够为企业经营带来实质性的收益。“随着数据资产的纳入,企业的资产也出现了新标的。在资产负债表中&…

外贸自建站什么意思?自建独立网站的好处?

外贸自建站的含义是什么?如何区分自建站和独立站? 随着全球贸易的不断发展,越来越多的企业开始关注外贸自建站。那么,“外贸自建站”到底是什么意思呢?海洋建站将为您详细解析这个问题,带您深入了解这一新…

Linux中安装部署环境(JAVA)

目录 在Linux中安装jdk 包管理器yum安装jdk JDK安装过程中的问题 验证安装jdk 在Linux中安装tomcat 安装mysql 在Linux中安装jdk jdk在Linux中的安装方式有很多种, 这里介绍最简单的方法, 也就是包管理器方法: 包管理器yum安装jdk Linux中常见的包管理器有: yumaptp…

C++多继承(实际开发不建议使用)

多继承可能引发父类中有同名成员的出现&#xff0c;需要加作用域区分 #include <iostream> #include <string> using namespace std;class Base { public:Base() {m_A 100;}int m_A; };class Base2 { public:Base2(){m_A 200;}int m_A; };class Son: public Bas…

非遗拓鱼丨以传统文化助力守护美丽长江

长江生物多样性极为丰富&#xff0c;是中华民族赖以生存的生命之源&#xff0c;值得人类更多的关注与保护。为传播非遗文化、宣传长江生态保护&#xff0c;积极响应野生动物保护宣传的号召&#xff0c;以非遗手工助力守护长江&#xff0c;11月18日&#xff0c;在重庆市陆海国际…