从 UseEffect 获取内存泄漏错误以响应本机导航身份验证流程

Question

我正在尝试设置反应本机导航身份验证流程，但出现如下错误；

<块引用>

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

该错误很可能是由此处的代码引起的。我之前修复了它，同时从这里得到了不同的错误，但现在它给出了内存泄漏错误。

  React.useEffect(() => {
    // Fetch the token from storage then navigate to our appropriate place
    const bootstrapAsync = async () => {
      let userToken;
      try {
        userToken = await SecureStore.getItemAsync(LOGIN_KEY);
        // IF USER ALREADY LOGGED IN CREATE NEW TOKEN TO KEEP USER LOGGED IN
        if(userToken!==null){
          let email = await SecureStore.getItemAsync(USER_NAME)
          let loginPassword = await SecureStore.getItemAsync(USER_PASSWORD)
          authContext.signIn({email,loginPassword})
                      .then(res=> {
                           if(res.response.status ==401){
                              authContext.signOut()
                              }
                            console.log(res)
                      })
                      .catch(err=>{ console.log(err)})
        }
        console.log("userTokennn ", userToken )
      } catch (e) {
        // Restoring token failed
        console.log("boostrapError", e)
      }
      // After restoring token, we may need to validate it in production apps
      // This will switch to the App screen or Auth screen and this loading
      // screen will be unmounted and thrown away.
      dispatch({ type: 'RESTORE_TOKEN', token: userToken });
    };
     bootstrapAsync();
  }, []);

另外，我尝试使用清理功能，但它没有像这样工作；

};
    return ()=> bootstrapAsync();
  }, []);

其余的代码在这里；

const authContext = React.useMemo(
    () => ({
      signIn: async (data) => {
        // In a production app, we need to send some data (usually username, password) to server and get a token
        // We will also need to handle errors if sign in failed
        // After getting token, we need to persist the token using `SecureStore`
        // In the example, we'll use a dummy token
         //SEND LOGIN INFO TO SERVER
       return await postSignIn(data.email, data.loginPassword)
        .then(async(res)=>{
            token = res.data.token
            await SecureStore.setItemAsync(LOGIN_KEY, token);
            await SecureStore.setItemAsync(USER_NAME, data.email )
            await SecureStore.setItemAsync(USER_PASSWORD, data.loginPassword )
            dispatch({ type: 'SIGN_IN', token: token });
        })
        .catch((err)=>{ console.log("sign in error", err); return err})
      },
    
      signOut: () => dispatch({ type: 'SIGN_OUT' }),
      signUp: async (data) => {
        // In a production app, we need to send user data to server and get a token
        // We will also need to handle errors if sign up failed
        // After getting token, we need to persist the token using `SecureStore`
        // In the example, we'll use a dummy token

        dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
      },
    }),
    []
  
  );

Answer 1

由于 api 调用的异步性质，有些情况下它们会在组件卸载后完成，例如用户访问页面，数据开始加载，但在加载完成之前，用户已导航到另一个页面。
这里有一些解决方案。

1. 您可以跟踪正在安装的组件的状态。

const [mounted, setMounted] = useState(true);

React.useEffect(() => {
  if (mounted) {
    bootstrapAsync();
  }

  return () => {
    setMounted(false);
  };
}, []);

2. 使用诸如来自react-use库的 useAsync 之类的东西，它负责处理这个问题。