React Native中useEffect清理函数不生效，触发未挂载组件更新警告

问题根因 #

1. 你声明了mounted变量但没有在异步回调中使用它做挂载状态判断，组件卸载后异步任务返回仍会执行dispatch，触发状态更新警告。
2. reducer的分支匹配写法错误，case ('signup', 'signin') 属于逗号表达式，最终只会匹配signin类型的action，signupaction无法命中对应分支。
3. Context.Provider的value中传递了不存在的tryLocalSignin函数，属于未定义引用问题。

修复方案 #

1. 修正useEffect逻辑 #

在异步回调拿到token后，先判断组件是否仍处于挂载状态，确认挂载再执行dispatch：

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

  const runAsync = async () => {
    const token = await SecureStore.getItemAsync('token');
    // 只有挂载状态下才执行dispatch
    if (mounted && token) {
      dispatch({ type: 'signin', payload: token });
    }
  };

  runAsync();

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

2. 修正reducer的分支匹配写法 #

多action匹配同一逻辑需要分开声明case：

const reducer = (state, action) => {
  switch (action.type) {
    case 'signup':
    case 'signin':
      // 额外新增了清空错误信息的逻辑，避免登录/注册成功后残留历史错误提示，可按需调整
      return { ...state, token: action.payload, errorMessage: '' };
    case 'error':
      return { token: undefined, errorMessage: action.payload };
    default:
      return state;
  }
};

3. 修正Context的value传递 #

删除未定义的tryLocalSignin，或者补充实现该函数：

<Context.Provider
  value={{ state, signup, signin, signinGoogle }}
>
  {children}
</Context.Provider>

修改完以上三处后警告就会消除，同时隐藏的分支匹配、未定义引用问题也会被修复。

内容的提问来源于stack exchange，提问作者florian22