我有以下两个组成部分。
<Foo>
<Bars/>
<Foo>
调用Foo时，控制台显示：
call Bar useEffect
Warning: Cant perform a React state update on an unmounted component...
call Foo useEffect
call Bar useEffect again
这里的代码笔，但它不会产生相同的警告，这可能是因为它在我的本地开发模式。但它确实显示空打印。
https://codepen.io/rsgmon/pen/OJmPGpa
是否不建议/不允许在每个组件中使用此组件结构
如果可以，我需要更改什么以避免警告？
这很可能是因为对Foo的状态更新触发了重新渲染，导致卸载和重新加载Bars。
然后原始的条API请求完成，并尝试更新不再安装的组件的状态，因此发出警告。
您可以通过在效果中声明一个最初为false的变量，并在效果的清理函数中将其设置为true来修复它：
useEffect(() => {
let unmounted = false;
doSomeAsynchronousStuff()
.then( result => {
if (unmounted) {
return; // not mounted anymore. bail.
}
// do stuff with result
})
return () => unmounted = true; // cleanup gets called on un-mount
}, [])
