如何检查深度嵌套的props？无需逐一验证父对象的方法

兄弟，这个问题我太有共鸣了！每次写这种嵌套props的判断，长串的&&真的又丑又麻烦，不过现在有好几种优雅的解决办法，帮你摆脱这种链式检查：

1. 可选链操作符（?.）+ 空值合并（??） #

这是ES2020引入的语法，简直是为这种场景量身定做的！直接用?.代替链式的&&判断，只要链路上任意一个属性不存在，表达式就会返回undefined，不会抛出错误：

this.props.photos?.activePhotos?.map(photo => <img src={photo.url} />)

如果担心activePhotos是null或者undefined导致map报错，可以搭配空值合并操作符??，给个默认的空数组：

(this.props.photos?.activePhotos ?? []).map(photo => <img src={photo.url} />)

这样就算activePhotos不存在，也会用空数组来执行map，完全不会崩溃。

2. 设置组件默认Props #

提前给组件的props设置默认值，从根源上避免“未定义”的情况：

类组件写法： #

class MyComponent extends React.Component {
  // ...
}

MyComponent.defaultProps = {
  photos: {
    activePhotos: []
  }
};

函数组件写法（默认参数）： #

function MyComponent({ photos = { activePhotos: [] } }) {
  // 直接放心遍历就行
  return photos.activePhotos.map(photo => <img src={photo.url} />)
}

这样就算父组件没传photos或者activePhotos，组件内部也会用预设的空数组，不用再做任何判断。

3. 解构赋值时设置默认值 #

在解构props的时候，给嵌套属性直接加上默认值，一步到位：

类组件： #

const { photos: { activePhotos = [] } = {} } = this.props;
// 之后直接用activePhotos.map(...)

函数组件： #

function MyComponent(props) {
  const { photos: { activePhotos = [] } = {} } = props;
  return activePhotos.map(photo => <img src={photo.url} />)
}

这里= {}是防止photos本身不存在时解构报错，activePhotos = []则保证数组始终有值。

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

如果你的项目里已经在用Lodash库，_.get可以安全地获取嵌套属性，还能指定默认值：

import _ from 'lodash';

const activePhotos = _.get(this.props, 'photos.activePhotos', []);
activePhotos.map(photo => <img src={photo.url} />)

第一个参数是目标对象，第二个是属性路径字符串，第三个是取不到值时的默认值，非常省心。

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