React Native报user.token为null is not an object错误

退出登录操作会清空已保存的登录用户对象user为null，此时LandScreen页面加载时直接执行user.token取值逻辑，对null值读取属性就会触发TypeError: null is not an object错误。这个错误发生在axios请求发起之前，不会被请求链上的.catch捕获，最终抛出未处理的Promise拒绝异常。
原代码还存在几个隐患：

• 没有对登录态做前置校验，无有效token时依然会发起接口请求
• user变量未在组件作用域内声明获取，逻辑依赖不明确
• useEffect没有加正确的依赖项，登录态变化时不会自动触发逻辑重跑
• 页面没有做加载空态处理，接口返回前会出现空白内容

const LandScreen = ({ navigation }) => {
  const [people, setPeople] = useState(null);
  // 替换为你项目实际获取登录用户的逻辑：从Redux/Context/AsyncStorage读取均可
  const user = null; // 示例占位，替换为实际取值逻辑，比如 const user = useSelector(state => state.auth.user)

  useEffect(() => {
    // 前置校验：无有效登录态直接跳转登录页，终止后续逻辑
    if (!user?.token) {
      navigation.replace('Login');
      return;
    }

    // 登录态有效再配置请求头拉取用户信息
    axios.defaults.headers.common['Authorization'] = `Bearer ${user.token}`;
    axios.get(userInfo)
      .then(response => {
        setPeople(response.data);
      })
      .catch(error => {
        console.log('获取用户信息失败:', error);
        // token失效场景统一跳转登录
        if (error.response?.status === 401) {
          navigation.replace('Login');
        }
      })
  // 把依赖项加全，登录态、navigation变化时自动重跑逻辑
  }, [navigation, user]);


  return(
      <View>
        {
          people ? (
            <>
              <Text>{people.name}</Text>
              <Text>{people.role}</Text>
            </>
          ) : (
            <Text>用户信息加载中...</Text>
          )
        }
      </View>
  )
}

• 尽量不要直接修改全局axios.defaults.headers配置，多页面多请求场景容易出现请求头污染，推荐封装独立的axios鉴权实例，在请求拦截器里统一读取token注入头信息
• 退出登录逻辑中，要先清空所有用户相关的本地缓存、全局状态，再执行登录页跳转，避免页面初始化时读到残留的无效登录态
• 可以封装全局的路由鉴权高阶组件，统一处理需要登录才能访问的页面校验逻辑，不用每个页面单独写判断

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