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("错误");
    }
  }, []);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

解决方案：

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

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

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