React Hooks: useEffect()调用了两次问题分析
更新时间：2023年11月23日 09:58:36 作者：来了老弟
这篇文章主要为大家介绍了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()调用的资料请关注脚本之家其它相关文章！
相关文章
在复杂的React应用中,某些计算密集型或耗时操作可能会阻塞主线程,导致用户界面出现卡顿或响应慢的现象,为了优化用户体验,可以采用Web Worker来在后台线程中执行这些操作,本文将详细介绍在React项目中如何集成和使用Web Worker来改善应用性能,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了React 项目迁移 Webpack Babel7的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
本文主要介绍了react使用.env文件管理全局变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
react quill中图片上传由默认转成base64改成上传到服务器的方法
这篇文章主要介绍了react quill中图片上传由默认转成base64改成上传到服务器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
下面小编就为大家带来一篇react native实现往服务器上传网络图片的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了React处理复杂图片样式的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
这篇文章主要给大家介绍了关于react-router中<Link/>属性的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要介绍了React项目中使用Redux的 react-redux，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
在编程开发中，网络数据请求是必不可少的，这篇文章主要介绍了React网络请求发起方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-09-09
props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点，props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用2022-12-12
最新评论