React Navigation条件渲染异常：注销后仍渲染已登录导航组件

可能的原因 #

1. 语法错误引发的异常逻辑
   你的代码中let token == GetTokenFromStore();使用了比较运算符==而非赋值运算符=，这会导致token变量未被正确赋值。即便你断点确认token为null，这个语法错误仍可能在部分场景下让组件的判断逻辑出现偏差。

2. React Navigation的屏幕缓存机制
   React Navigation会缓存已渲染的屏幕组件实例，即便你在Navigator中移除了LoggedInNav对应的<MainStack.Screen>，已渲染的LoggedInNav实例不会立即被卸载。如果该组件内部存在依赖认证状态的逻辑（比如未清理的Redux订阅、持续运行的useEffect），它仍会触发渲染并抛出错误。

3. token未触发组件响应式更新
   若GetTokenFromStore()只是一次性从Redux存储读取token，未通过useSelector这类钩子订阅状态变化，那么当token被清空后，包裹Navigator的组件不会自动重新渲染，导致LoggedInNav仍被渲染。

解决方案 #

1. 修正语法错误 #

将赋值语句的双等号替换为单等号：

const token = GetTokenFromStore(); // 用=替换==

2. 确保token的响应式获取 #

使用Redux的useSelector钩子获取token，确保token状态变化时组件自动重新渲染：

import { useSelector } from 'react-redux';

// 在组件内部获取token，路径需匹配你的Redux state结构
const token = useSelector(state => state.auth.token);

3. 退出登录时重置导航栈 #

退出登录时，除了清空token，还要调用React Navigation的reset方法重置导航栈，彻底销毁LoggedInNav实例：

const handleLogout = () => {
  // 清空Redux中的token
  dispatch(clearToken());
  // 重置导航栈到登录页面
  navigation.reset({
    index: 0,
    routes: [{ name: 'Login' }],
  });
};

4. 清理LoggedInNav内部的副作用 #

检查LoggedInNav组件内的useEffect或订阅逻辑，添加清理函数避免组件卸载后仍执行代码：

useEffect(() => {
  const unsubscribe = someAuthRelatedSubscription();
  // 组件卸载时执行清理
  return () => unsubscribe();
}, []);

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