使用三元运算符的React Navigation认证流触发TypeError问题

1. 核心错误：useContext调用在Provider作用域之外 #

你的根组件中，先执行了const { state } = useContext(AuthContext);，但这个组件的返回值才渲染<AuthProvider>——这意味着当前根组件不在AuthProvider的包裹范围内，useContext无法获取到Context的有效值，返回的是undefined，解构state自然会抛出undefined is not an object的错误。

修复方式 #

把导航逻辑抽成单独的子组件，让它处于AuthProvider的作用域内：

// 根组件
export default () => {
  return (
    <AuthProvider>
      <AppNavigator />
    </AuthProvider>
  );
};

// 单独的导航组件
const AppNavigator = () => {
  const { state } = useContext(AuthContext);
  return (
    <NavigationContainer>
      {state.token ? <MainNavigator /> : <AuthNavigator />}
    </NavigationContainer>
  );
};

2. Context结构可能存在不匹配 #

检查你的creatingContext函数返回的Context值结构：

• 如果creatingContext返回的Provider是把{ state, signin, signout, ... }作为value传递，那const { state } = useContext(AuthContext)是正确的；
• 如果creatingContext直接把state对象作为value（没有嵌套的state属性），那你应该直接解构token：const { token } = useContext(AuthContext)，否则会因为找不到state属性而报错。

3. 其他潜在问题（避免后续报错） #

• tokencheck函数中，dispatch的type写错了：应该是字符串"signin"，而不是变量signin（你定义的signin函数），否则reducer无法匹配到正确的case：

  dispatch({ type: "signin", payload: token }); // 修正为字符串
  

• 所有用到navigate的函数（tokencheck、signup、signin）都没有获取导航实例的逻辑，你需要在组件中通过useNavigation()拿到navigate，再传入这些函数，或者在自定义Context时整合导航逻辑。

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