useEffect 钩子两次加载数据，我的意思是它运行了两次答案

【问题标题】：The useEffect hook is loading the data two time, I mean it is running twiceuseEffect 钩子两次加载数据，我的意思是它运行了两次
【发布时间】：2022-08-11 21:07:17
【问题描述】：

我正在尝试将数据加载到我的 App.js 文件中，以从后端做出反应。我使用 redux 构建了从后端到前端的整个数据获取和存储管道。这是代码：

function App() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPosts());
  }, [dispatch]);
  const posts = useSelector((state) => state.posts);
  console.log(posts);
  return (
    <div>
      <h1>App</h1>
    </div>
  );
}

在上面的代码中，每当 App.js 刷新时，console.log 就会在 google 控制台中显示两次数据。如何让它只运行一次？

你在使用 react 18 和 <StrictMode> 吗？如果是这样，这是正常的。在开发版本中，严格模式模拟组件的卸载和重新安装。目标是让您更容易发现由于忘记清理 useEffects 导致的错误
如果您想获得有关React.StrictMode 以及为什么某些回调运行两次的更详细说明，请查看：How to Enable React Strict Mode

标签： reactjs react-hooks use-effect mern

【解决方案1】：

那是因为您在严格模式下运行您的应用程序。转到 index.js 并注释严格模式标签。你会发现一个单一的渲染。

发生这种情况是 React.StrictMode 的有意功能。它只发生在开发模式下，应该有助于在渲染阶段发现意外的副作用。

这是来自文档：

严格模式不能自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。这是通过故意双重调用以下内容来完成的功能：...

Here你可以看到严格模式的文档。

【讨论】：