useEffect 清理功能在 React Native 中不起作用

Question

我正在尝试从 Expo 的 SecureStore 获取令牌，然后发送一个操作。

我正在使用 useEffect 以便在组件首次渲染时检查是否有可以使用的令牌。

useEffect(() => {
let mounted = true;

SecureStore.getItemAsync('token').then((token) =>
  token ? dispatch({ type: 'signin', payload: token }) : null
);

return () => (mounted = false);
}, []);

但是，我无法摆脱：

无法对未安装的组件执行 React 状态更新。这是 无操作，但它表明您的应用程序中存在内存泄漏。修理， 在 useEffect 清理中取消所有订阅和异步任务 功能

enter image description here

根据要求提供更多代码：

import React, { useReducer, createContext, useEffect } from 
'react';
import * as SecureStore from 'expo-secure-store';
import forumApi from '../api/forumApi';

export const Context = createContext();

const reducer = (state, action) => {
switch (action.type) {
case ('signup', 'signin'):
  return { ...state, token: action.payload };
case 'error': {
  return { token: undefined, errorMessage: action.payload };
}
default:
  return state;
 }
};

const AuthProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, {
token: undefined,
errorMessage: '',
 });

useEffect(() => {
let mounted = true;

const runAsync = async () =>
  await SecureStore.getItemAsync('token').then((token) =>
    token ? dispatch({ type: 'signin', payload: token }) : null
  );

runAsync();

return () => (mounted = false);
}, []);

const signup = async (fullName, email, password, passwordConfirm) 
=> {
try {
  const res = await forumApi.post('/api/v1/users/signup', {
    fullName,
    email,
    password,
    passwordConfirm,
  });

  const { token } = res.data;
  await SecureStore.setItemAsync('token', token);
  dispatch({ type: 'signup', payload: token });
} catch (err) {
  dispatch({
    type: 'error',
    payload: 'We could not register you. Please try with 
 different email.',
  });
 }
 };

 const signin = async (email, password) => {
 try {
  const res = await forumApi.post('/api/v1/users/signin', {
    email,
    password,
  });

  const { token } = res.data;
  await SecureStore.setItemAsync('token', token);
  dispatch({ type: 'signin', payload: token });
} catch (err) {
  dispatch({
    type: 'error',
    payload: 'We could not log you in. Please try again.',
  });
 }
 };

const signinGoogle = async (token, fullName, email, photo) => {
try {
  const res = await forumApi.post('/api/v1/users/auth/google', {
    fullName,
    email,
    photo,
  });

  await SecureStore.setItemAsync('token', token);
  dispatch({ type: 'signup', payload: token });
} catch (err) {
  dispatch({
    type: 'error',
    payload: 'We could not register you. Please try with different email.',
  });
}
};

return (
<Context.Provider
  value={{ state, signup, signin, signinGoogle, tryLocalSignin }}
>
  {children}
</Context.Provider>
 );
 };

export default AuthProvider;

Answer 1

@florian22 所以看起来你正在尝试更新提供者级别的状态。为了更新上下文的状态，您必须在提供者内部。 useEffect 必须在内部节点上。

查看示例：

const App = ({children}) => {

    useEffect(() => {
     const runAsync = async () => {
     const token = await SecureStore.getItemAsync('token');

     if(token) dispatch({ type: 'signin', payload: token });
     }

     runAsync();
     }, []);

  return (<View>{children}</View>);
  }

const MainApp = ({children}) => {

return (
<AuthProvider>
 <App>
  {children}
 </App>
</AuthProvider>
}

Answer 2

不需要使用mounted 变量。够了

useEffect(() => {
  SecureStore.getItemAsync("token").then((token) =>
    token ? dispatch({ type: "signin", payload: token }) : null
  );
}, []);