在useEffect清理函数执行之前获取“无法对卸载的组件执行React状态更新”

Question

在调用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: {});

Answer 1

使用useLayoutEffect而不是useEffect

在这里阅读更多

https://kentcdodds.com/blog/useeffect-vs-uselayouteffect