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

news2024/9/20 18:43:57

问题描述:

我在用 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.coloradmin.cn/o/1229771.html

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

相关文章

算法进阶——链表中环的入口节点

题目 给一个长度为n链表&#xff0c;若其中包含环&#xff0c;请找出该链表的环的入口结点&#xff0c;否则&#xff0c;返回null。 数据范围&#xff1a;1<结点值<10000 要求&#xff1a;空间复杂度O(1)&#xff0c;时间复杂度O(n) 例如&#xff0c;输入{1,2},{3,4,5…

【文末送书】计算机网络 | IO多路转接技术 | poll/epoll详解

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

麒麟KYLINOS2303系统上禁用新功能介绍页面

原文链接&#xff1a;麒麟KYLINOS2303系统上禁用新功能介绍页面 hello&#xff0c;大家好啊&#xff0c;今天给大家带来一篇在麒麟KYLINOS2303系统上禁用新功能介绍页面的文章&#xff0c;在我们安装完系统登录后&#xff0c;会发现有新功能介绍这个界面&#xff0c;我们可以通…

OpenCvSharp从入门到实践-(01)认识OpenCvSharp开发环境搭建

目录 一、OpenCV 二、OpenCvSharp 三、OpenCvSharp开发环境搭建 四、下载 五、其他 一、OpenCV OpenCV是基于Apache2.0许可&#xff08;开源&#xff09;发行的跨平台计算机视觉和机器学习函数库&#xff0c;支持Windows、Linux、Android和Mac OS操作系统。OpenCV由一系…

人工智能靠自学就行?

随着人工智能技术的飞速发展&#xff0c;这个领域的知识和技术对于很多人来说都充满了神秘和吸引力。很多人都想要学习人工智能&#xff0c;但是又不知道如何入手&#xff0c;是否需要参加培训机构或者跟着导师学习呢&#xff1f;今天&#xff0c;我想和大家分享一些关于自学人…

全流量分析应用运行和访问情况

在当今数字化时代&#xff0c;应用程序的运行和访问情况对于企业和组织来说至关重要。无论是在线销售平台、移动应用还是企业内部系统&#xff0c;应用的性能和可用性直接影响着用户体验、业务流程以及组织效率。因此&#xff0c;对应用的运行和访问情况进行全面分析和评估&…

[Kettle] 公式

公式是用来计算数据流中数据的表达式 公式可以是"AB"这样的简单计算&#xff0c;也可以是类似"if/then"复杂业务逻辑判断的表达式 数据源 2019年11月月考成绩(Kettle数据集16).xlshttps://download.csdn.net/download/Hudas/88553816?spm1001.2014.300…

【MySQL】细谈SQL高级查询

文章目录 一、前言 & 准备工作二、简易高级查询⚙ 准备工作1、查询每一门课程及其先修课程2、查询和“刘涛”在一个班级的学生的信息3、查询选修了‘计算机基础’课的学生的学号、姓名③ 连接方式④ 子查询嵌套方式 4、查询没有选修课程的学生的信息① 子查询in方式② 子查…

Python爬虫技术系列-03/4flask结合requests测试静态页面和动态页面抓取

python构建web服务 flask内容参考:Flask框架入门教程&#xff08;非常详细&#xff09; flask安装与运行测试 安装flask pip install flask创建一个webapp.py文件&#xff0c;内容如下 from flask import Flask# 用当前脚本名称实例化Flask对象&#xff0c;方便flask从该脚…

赠人玫瑰,手有余香,分享5款精致小巧的软件

​ 分享是一种美好的事情&#xff0c;它能让快乐变得更多&#xff0c;它能让悲伤变得更少&#xff0c;我会持续分享一些好用的软件给大家。 1.矢量图形设计——Affinity Designer ​ Affinity Designer是一款屡获殊荣的矢量图形设计软件&#xff0c;适用于 Windows、macOS 和…

wvp gb28181 pro 拉流代理功能

前言 不是所有的摄像机都支持国标或者推流的&#xff0c;但是这些设备可以得到一个视频播放地址&#xff0c;通常为rtsp协议&#xff0c; 以大华为例。可以得到这样一个流地址&#xff0c;可以直接用vlc进行播放&#xff0c;此时我们可以通过拉流代理功能将这个设备推送给其他国…

如何构建更简洁的前端架构?

目录 为什么需要前端架构&#xff1f; 那么&#xff0c;前端架构是什么样的呢&#xff1f; 使用了哪些层&#xff1f; 那么&#xff0c;这种架构会出什么问题呢&#xff1f; 我们应该如何避免这些错误&#xff1f; 哪些原则应适用于组件&#xff1f; Anti-Patterns 反模…

不会制作电子期刊怎么办?新发现

​电子期刊已经成为当今社会中非常流行的一种出版形式&#xff0c;它不仅方便快捷&#xff0c;而且易于分享和传播。如果你一直想尝试制作电子期刊&#xff0c;但又不知道如何开始&#xff0c;那么不用担心&#xff01;今天我将为你揭秘制作电子期刊的秘籍&#xff0c;让你轻松…

家电电器展示预约小程序的作用是什么

电器产品已经成为人们生活的必备品&#xff0c;如冰箱、电视机、洗衣机等&#xff0c;而这些产品的购买方式也很多&#xff0c;可以到线下门店购买&#xff0c;也可以到线上多个电商平台购买&#xff0c;如今互联网高速发展以及民众享受线上服务带来的便捷性&#xff0c;同时商…

Openlayer【二】—— 绘制不同的点、线以及给其添加监听事件

Openlayer【二】—— 绘制不同的点、线以及给其添加监听事件 接上篇&#xff1a;OpenLayer初始化 在openlayer当中&#xff0c;图层Layer与地图源Source是一对一的关系。当创建了一个图层Layer&#xff0c;相应的需要给图层添加地图源Source&#xff0c;然后将图层Layer添加到…

【Android】画面卡顿优化列表流畅度六(终篇)

上一篇&#xff1a; 【Android】画面卡顿优化列表流畅度五之下拉刷新上拉加载更多组件RefreshLayout修改 场景回顾&#xff1a; 业务经过一年半左右的运行后&#xff0c;出现了明显的列表卡顿情况&#xff1b;于是开始着手进行列表卡顿优化。目前的情况是&#xff1a; 网络图…

8年资深测试,自动化测试常见问题总结,惊险避坑...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、自动化测试简介…

好的CRM系统有哪些核心能力?

CRM是企业管理的重要工具&#xff0c;可以维护管理客户关系&#xff0c;提高企业的核心竞争力。市场营销、销售、客户服务和技术支持等相关领域都需要用到CRM系统。那么一个好的CRM&#xff0c;最核心的能力有哪些&#xff1f; 1.销售自动化 这里简单介绍下销售自动化的功能&…

非关系型数据库Redis(缓存型数据库)

关系型数据库和非关系型数据库的区别 关系型数据库 是一个结构化的数据库&#xff0c;记录方式是行&#xff08;记录对象属性&#xff09;和列&#xff08;声明对象&#xff09; 表与表之间是有关联的&#xff0c;使用sql语句来对指定的表、库进行增删改查 在创建表的时候&…

尽快调整心态,切莫自讨苦吃

退休多年的老龄人的本“人民体验官”闲得无聊&#xff0c;怕被闲出更多病痛&#xff0c;更怕被闲死&#xff0c;所以天天上网坚持职业新闻人的老习惯——上网读新闻&#xff0c;并以一孔之见置评&#xff0c;旨在抛砖引玉。 11月8日&#xff0c;本“人民体验官 ”在推广人民日…