React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React Hooks useEffect()调用

React Hooks: useEffect()调用了两次问题分析

作者:来了老弟

这篇文章主要为大家介绍了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}/>
);

问题解决。

以上就是React Hooks: useEffect()调用了两次问题分析的详细内容,更多关于React Hooks useEffect()调用的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文