应用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}/>);
问题解决。