Redux中取state属性为null引发TypeError问题求助

当然需要添加条件判断啦！这种深层嵌套的Redux状态属性访问，很容易因为某一层状态还没初始化、或者异步数据还没加载完成而出现null/undefined，直接链式访问就会触发TypeError，导致页面崩掉。

问题根源 #

你现在的代码直接写state.session.user.designer.account.bank，一旦state.session.user.designer.account是null，继续访问.bank就会立刻抛出TypeError——因为null没有bank属性，浏览器直接终止执行了。

有效解决方案 #

这里给你三种常用的靠谱写法，根据你的项目环境选就行：

1. 可选链操作符（最简洁，推荐）

ES2020及以上环境支持，用?.替代.，它会逐层检查属性是否存在，只要某一层是null/undefined就停止访问，返回undefined，不会报错。再配合|| null把结果转成你需要的null：

ShopSetupForm = connect(state => ({
  initialValues: {
    account_bank: state.session?.user?.designer?.account?.bank || null
  }
}))

2. 逐层嵌套条件判断（兼容旧环境）

如果你的项目还不支持ES2020，就从外到内逐层判断每个层级是否存在，只有所有父层级都有效时，才去取最终的bank属性：

ShopSetupForm = connect(state => {
  let accountBank = null;
  // 从最外层开始逐层检查，避免中途踩空
  if (state.session 
      && state.session.user 
      && state.session.user.designer 
      && state.session.user.designer.account) {
    accountBank = state.session.user.designer.account.bank;
  }
  return {
    initialValues: {
      account_bank: accountBank
    }
  }
})

3. 用Lodash的get方法（如果项目已引入Lodash）

Lodash的_.get方法专门为这种嵌套属性访问设计，第二个参数是属性路径字符串，第三个参数是取不到时的默认值：

import _ from 'lodash';

ShopSetupForm = connect(state => ({
  initialValues: {
    account_bank: _.get(state, 'session.user.designer.account.bank', null)
  }
}))

为什么你之前的条件写法无效？ #

大概率是因为你没有逐层检查，比如只判断了state.session.user.designer.account，但如果state.session.user.designer本身是null，访问.account的时候就已经报错了，根本走不到后面的判断。必须从最外层的state.session开始，一层一层确认存在，才能安全访问内层属性。

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