如何清理 useffect 调用中的函数？答案

【问题标题】：How to clean up function in a useffect call?如何清理 useffect 调用中的函数？
【发布时间】：2020-09-12 22:46:52
【问题描述】：

所以我正在更新 useEffect 挂钩中的状态并收到此错误，如果我们在 useEffect 挂钩中使用 async/await 语法，我不知道如何使用清理功能

错误：警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 %s 中的所有订阅和异步任务。%s，一个 useEffect 清理函数，


  const getToken = async () => {
    const mytoken = await AsyncStorage.getItem("fb_token");
    if (mytoken) {
      navigation.navigate("Main", { screen: "Map" });
      setToken(mytoken);
    } else {
      setToken(false);
    }
  };
    getToken();

  }, [navigation]);```

How to update state and use clean up function should i declare this function outside hook but if i do that how would i use that function as a clean up?

【问题讨论】：

您在导航到另一个页面后正在执行setToken。这可能是问题
如果我在导航功能之前调用 setToken 之后我需要调用清理功能吗？
看看这是否有帮助：stackoverflow.com/a/49906662/8826104
@Edward ya 它特别有帮助，尤其是 useRef 方法

标签： javascript reactjs react-native

【解决方案1】：

当组件由于useEffect 依赖项之一发生更改而卸载或重新安装时，您可以通过从useEffect 返回一个函数来获取回调。你可以用它来设置一个标志，让自己知道事情发生了变化。见***cmets：

useEffect(() => {
    let cancelled = false; // *** A flag to let us know this is cancelled

    const getToken = async () => {
        const mytoken = await AsyncStorage.getItem("fb_token");
        if (!cancelled) { // *** Check the flag
            if (mytoken) {
                navigation.navigate("Main", { screen: "Map" });
                setToken(mytoken);
            } else {
                setToken(false);
            }
        }
    };
    getToken().catch(error => {                 // ***
        // Handle/report error here...          // *** Handle errors from the async function
    });                                         // ***

    // *** A callback to let us know to set the flag
    return () => {
        cancelled = true;
    };
}, [navigation]);

（您还违反了上面标记的承诺规则之一：始终要么处理错误，要么将承诺链传递给将要处理的东西。）

请注意，正如我之前提到的，在两种情况下会跳过设置令牌：

卸载的组件（给您带来麻烦的组件）
navigation 已更改

【讨论】：