React本机内存泄漏问题出现在异步函数中

vdzxcuhz  于 2022-12-24  发布在  React
关注(0)|答案(1)|浏览(127)

我有一个问题,当渲染的useEffect与异步函数,这是显示为下图。它不断出现,每次我刷新应用程序

这是我实现的代码,用于从服务器端应用程序获取accesstoken

useEffect(() => {
    async function getAccessToken() {
      const accessToken = await AsyncStorage.getItem("access_token");
      console.log(typeof accessToken);
      setAccessToken((prev) => {
        return accessToken;
      });
    }

    getAccessToken();

    return async ()=> await getAccessToken()
  }, [accessToken, count]);
jdzmm42g

jdzmm42g1#

根据React的官方文档,“React会在组件卸载时执行清理。然而......效果会在每次渲染时运行,而不是只运行一次。这就是为什么React还会在下次运行效果之前清理上一次渲染的效果。”
下面是一个示例代码,它可能适合您,但可以进一步优化。

useEffect(() => {
  let isSubscribed = true;
  async function getAccessToken() {
    const accessToken = await AsyncStorage.getItem("access_token");
    console.log(typeof accessToken);
    if (isSubscribed) {
      setAccessToken((prev) => {
        return accessToken;
      });
    }
  }

  getAccessToken();

  return () => {
    // cancel the subscription
    isSubscribed = false;
  };
}, [accessToken, count]);

您可以通过在卸载后取消获取请求来进一步优化它。
我不知道为什么,但是你的组件在useEffect完成它的状态更新逻辑之前不知何故被卸载了。因此,它试图更新卸载组件的状态,导致内存泄漏。
进一步的解释,你可以参考this。这是一篇很棒的文章,我发现它和你的用例很相似。

相关问题