在执行 useEffect 清理功能之前获取“无法对未安装的组件执行 React 状态更新”答案

【问题标题】：Getting 'Can't perform a React state update on an unmounted component' before useEffect cleanup function executes在执行 useEffect 清理功能之前获取“无法对未安装的组件执行 React 状态更新”
【发布时间】：2019-06-13 15:30:58
【问题描述】：

在调用 useEffect 清理函数之前，我收到警告“无法对未安装的组件执行 React 状态更新”。

这段代码：

const [data, setData] = useState({});

useEffect(() => {
   doFetch();
   return () => { console.log('useEffect cleanup'); };
}, []);

const doFetch = async () => {
   const response = await fetchAsync(...);
   console.log('about to set state');
   setData(response.data);
   console.log('did set state');
};

产生控制台输出：

about to set state
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
did set state
useEffect cleanup

我认为我的清理功能将在组件卸载之前执行，因此在警告之前执行，但它在警告之后执行。因此，我无法通过正确取消异步任务（我已经尝试过）来消除警告。我怎样才能让这个警告消失？

如果有任何不同，组件正在使用 ReactDOM.render() 和 ReactDOM.unmountComponentAtNode() 在单元测试中安装和卸载。 fetchAsync 函数被

删除

const stub = sinon.stub(..., fetchAsync);
stub.returns(Promise.resolve({status: 200, data: {});

【问题讨论】：

旁注：这不是问题，但您需要处理来自doFetch 的错误。否则，如果提取失败，您将收到“未处理的拒绝”错误。
是的，为了简单起见，我把它去掉了，但我确实在我的实际代码中处理它。

标签： javascript reactjs

【解决方案1】：

使用useLayoutEffect 而不是useEffect

【讨论】：

“使用 useLayoutEffect 而不是 useEffect'” 说为什么。即使链接消失，答案也应该是完整的。