React Native实现Auth状态时React Context Provider值不更新？

• 正在为React Native应用基于React Context实现Auth状态管理，参考了公开的Auth状态管理示例代码完成了初步实现
• 核心实现代码如下：

  // AuthContext.tsx
  export const AuthContext = createContext<{
    user: null | string;
    login: () => void;
  }>({
    user: null,
    login: () => {},
  });
  
  export const AuthProvider = ({ children }: Props) => {
    const [user, setUser] = useState<null | string>(null);
    // 调试用：在Provider组件内部从Context取值
    const { user: contextUser } = useContext(AuthContext);
  
    return (
      <AuthContext.Provider
        value={{
          user,
          login: () => {
            setUser("My Name");
            console.log("Auth Provider pressed");
            console.log("user (state) " + user);
            console.log("contextUser (context) " + contextUser);
          },
        }}
      >
        {children}
      </AuthContext.Provider>
    );
  };
  
  // Navigation.tsx
  export const Navigation = ({}: Props) => {
    // 从Context取登录用户值
    const { user } = useContext(AuthContext);
  
    return (
      <AuthProvider>
          {user ? <HomeScreen /> : <Button />}
      </AuthProvider>
    )
  }
  
  // Button.tsx
  export const Button = ({}: Props) => {
    const { login } = useContext(AuthContext);
  
    return (
      <View>
          <Touchable onPress={login}>
            <Text style={styles.container}>Submit</Text>
          </Touchable>
      </View>
    )
  }
  

• 预期效果：点击提交按钮触发login方法，更新AuthProvider内部的user state后，Context对外暴露的user值同步更新，组件根据user值在登录态/非登录态界面间切换
• 实际运行现象：
  • 点击按钮后，AuthProvider内部useState的user值确实能正常触发更新
  • Provider内部调试获取的contextUser永远是初始值null，不会随state变化
  • 无法触发登录态切换，因为感知不到user值的更新
• 困惑点：代码看起来和参考示例没有区别，但Context的user值始终无法同步更新

两处组件位置完全违背了React Context的运行规则，从根上断了数据流：

• AuthProvider内部的取值逻辑没有任何调试价值
  React Context的取值规则是：useContext 永远只获取当前组件上层组件树里，最近的同Context Provider传递下来的值。
  AuthProvider本身是值的提供方，它内部返回的Provider标签，作用是给子树注入动态值。你在AuthProvider组件的函数体里调用useContext(AuthContext)，拿到的是AuthProvider上层的Context值——也就是createContext时写的默认null，根本不是AuthProvider自己往下传的那个动态value。这个contextUser永远是null是完全正常的运行结果，和你的状态更新逻辑没关系。
• Navigation的取值位置放在了Provider外面
  Navigation组件在自身函数逻辑里调用useContext(AuthContext)时，它还没被AuthProvider包裹，处在Provider的外层。这时候拿到的user值也是全局默认的null，完全感知不到AuthProvider内部的state变化——哪怕Provider内部user更新成了非null，Navigation拿到的值也不会有任何变化，自然永远切不到HomeScreen。

按照Context的数据流调整组件层级：

• 删掉AuthProvider内部多余的useContext调试代码，这个位置本来就拿不到Provider自己提供的值，调试没有意义
• 把需要消费Context值、判断登录态切换页面的逻辑，移到AuthProvider包裹的子组件内部，不要在Provider外层取context值

修正后的结构参考：

// 这个组件放在AuthProvider内部，才能正常拿到动态更新的user值
const RootNavigator = () => {
  const { user } = useContext(AuthContext);
  return user ? <HomeScreen /> : <Button />;
}

export const Navigation = () => {
  return (
    <AuthProvider>
      <RootNavigator />
    </AuthProvider>
  )
}

调整层级之后的运行逻辑完全符合预期：

• Button在AuthProvider内部，可以正常拿到login方法，触发state更新
• AuthProvider的user state变化时，会自动触发所有消费该Context的子组件重渲染
• RootNavigator拿到更新后的user值后，会自动完成登录态/非登录态的页面切换

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