React执行setUser后立即读取user.user.name报Cannot read properties of null错误如何解决

• React 中 setState 是异步批量更新的，你调用 setUser({ user: response.data.user }) 之后，立刻读取 user 变量还是当前渲染周期的旧值，也就是你初始化的 null，所以访问 null.user 就会触发这个类型错误。
• 除此之外，在组件初始渲染阶段、或者 token 不存在时 user 都会被设为 null，如果此时在模板或者其他逻辑中直接访问 user.user.name 也会触发同款错误。

• 如果你只是想在设置 user 后立刻打印值，直接读取你要赋值的源数据即可，不需要走 state：

const targetUser = response.data.user
setUser({ user: targetUser })
console.log(targetUser.name)

• 所有访问 user 深层属性的位置都加上可选链操作符，避免空值报错：

// 打印场景
console.log(user?.user?.name)
// 传递给子组件或者模板渲染场景，也可以配合空值合并运算符给默认值
<NavbarStore user={user?.user ?? {}} />

• 如果你需要在 state 中的 user 变更后执行后续逻辑，可以单独加一个依赖 user 的 useEffect：

useEffect(() => {
  if (user?.user) {
    console.log(user.user.name)
    // 其他需要在user更新后执行的逻辑
  }
}, [user])

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