关于react-hooks:React-Hooks-useEffect调用了两次

应用create-react-app脚手架创立的React前端我的项目,在函数式组件中应用useEffect加载接口数据时 发现一个奇怪的问题:刷新页面接口调用了两次!!。

代码剖析

useEffect(() => {
    const wrapper = async () => {
        await fetchData();
    }
    wrapper().then(r => {});
}, [param]) 

在 React Hooks: useEffect() is called twice even if an empty array is used as an argument 找到了答案。

起因是开发环境应用了React严格模式,代码编译后在正式环境不会呈现这样的问题。

如果在开发环境不想呈现这种状况,能够在index.tsx中找到上面的代码:

root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

批改为:

root.render(
    <RouterProvider router={router}/>
);

问题解决。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理