解决react@v18的useEffect函数执行两遍的问题

原因

出现这样的问题如果给useEffect提供的依赖没问题的话，那么原因一定是使用了react的严格模式

root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
);

开发环境不建议使用严格模式

react@v18 严格模式下useEffect会执行两遍

严格模式是用于突出显示应用程序中潜在问题的工具，它不会呈现任何可见的UI。

它只用于激活对其后代的额外检查和警告。

严格模式不会影响生产环境，生产环境下useEffect还是执行一遍的。

严格模式篡改了console.log的执行，有时候你在debug的时候会非常疑惑

root.render(
    <Router>
      <App />
    </Router>
);

非要用严格模式怎么解决useEffect函数执行两遍的问题

定义一个ref来判断是否是第一次执行

const Test: React.FC<{}> = () => {
  const [num,setNum]=useState<number>(0)
  const firstRenderRef = useRef(true);
  useEffect(()=>{
    if(firstRenderRef.current){
      firstRenderRef.current = false;
      return;
    }
    setNum(()=>20)
  },[])
  return (
    <>
      <div>{num}</div>
    </>
  );
};

什么时候使用严格模式

React StrictMode 突出了应用程序中的潜在问题。通过这样做，它可以帮助你编写更具可读性和安全性的应用程序。此功能包含在 React 包中，因此你不必单独导入它。如果你有任何可疑代码，请将其包装在 StrictMode 帮助程序组件中，仅此而已。
跟多内容参考这篇博客

吐槽一下

root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
);

react官方脚手架生成的模板默认使用严格模式，这也是很多新手会遇到这个问题