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-native 封装视频播放器react-native-video的使用
本文主要介绍了react-native 封装视频播放器react-native-video的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-01-01React Native 自定义下拉刷新上拉加载的列表的示例
本篇文章主要介绍了React Native 自定义下拉刷新上拉加载的列表的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最新评论