如何在 useffect 调用中清理 function？

Question

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

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

  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?

Answer 1

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

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]);

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

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

1. 卸载的组件（给您带来麻烦的组件）

2. navigation改变了