共计 470 个字符,预计需要花费 2 分钟才能阅读完成。
应用 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
2022-10-17