React Native结合Redux与React Navigation登出时导航器报错

• 报错触发逻辑：Home组件直接订阅Redux状态，当DELETE_USER action触发、用户变为null时，Home会先收到空用户的新props，在渲染阶段直接访问users.current.id触发null引用错误。这个过程发生在Navigator完成路由切换、卸载Home组件之前，因此表象是Navigator仍在尝试渲染Home页面。
• 日志异常原因：Home内的Logout是组件渲染时生成的闭包，捕获的是当前渲染周期的旧props（未清空的用户状态），因此后续打印的users.current不会同步Redux的最新值，属于JS闭包的正常特性，不是状态同步故障。
• 冗余逻辑问题：Logout中手动调用navigation.navigate('Login')没有实际作用——Navigator已经绑定Redux用户状态，只要用户清空就会自动切换Login路由，手动调用反而会导致导航栈条目混乱。

1. 给Home组件加空值防御，消除null引用报错 #

修改Home.tsx的渲染部分，访问用户属性前先做存在性判断，避免组件收到空用户props时崩溃：

// 原代码
<Text>Hola {users.current.id}</Text>

// 修改后
{users.current && <Text>Hola {users.current.id}</Text>}

2. 移除Logout内多余的手动导航逻辑 #

路由切换完全由Navigator绑定的Redux状态驱动，不需要在登出流程中手动跳转。修改Home.tsx内的Logout函数：

async function Logout(id:string){
   console.log('Function start');
   await Auth.LogoutUser(id, props);
   // 删除多余的导航调用
   // navigation.navigate('Login');
}

3. （可选优化）降低AuthService的耦合度 #

当前AuthService通过透传整个组件props获取dispatch的写法耦合性较强，可直接传入dispatch函数，避免无意义的props透传：

// AuthService.tsx 调整LogoutUser定义
async function LogoutUser(id: string, dispatch: any){
  await dispatch(UserActions.Delete(id));
}

// Home.tsx 调用时传入dispatch即可
await Auth.LogoutUser(users.current.id, props.dispatch);

• 点击登出按钮触发dispatch后，Redux正确清空用户信息
• Home组件在卸载过程中收到空用户props时，不会触发属性访问错误
• Navigator检测到用户为null后，自动切换渲染Login路由，完成登出流程

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