reactjs - React 中取消效果的顺序（useEffect）

Question

卸载组件时，由于某种原因，先取消父组件的效果，然后取消子组件...（我们正在谈论 useEffect 挂钩）

这没有意义...

可能是什么问题呢？

问题是我的子组件中有地图路线..当路线被卸载时，他们会尝试在地图中删除自己......并且地图已经被删除，因为取消父组件的效果是比子组件更早调用（子组件通过上下文了解父组件）

https://codesandbox.io/s/ocherednost-otmeny-effektov-g0z0r

查看浏览器控制台

我期望： 孩子取消 useEffect 父母取消 useEffect

标签： reactjs

Answer 1

我猜您可能会偶然发现有关更新未安装组件的警告。您可以使用以下模式来解决此问题：

useEffect(() => {

    let mounted = true;

    if(mounted){
        updateMyComponent();
    }

    return () => {
         mounted = false;
    }

}, [deps]);

当组件卸载时，mounted将变为false并且updateMyComponent不会运行。也许这可以解决您在子组件中遇到的问题？