是时候使用babel-plugin-transform-optional-chaining了不得不说，这代码写着很累，看

先看下面这段代码：

const MyComponent = props => (
  <div>{props.user.info.addresss[0].city || '暂无城市信息'}</div>
)

这段代码平平无奇，但是同样的，下面这段配套报错也十分常见：

Uncaught TypeError: Cannot read property '0' of undefined

会是什么原因造成的报错不需要赘述，直观的解决方法有二：通过人治手段约束数据所有层不得为空，或者像如下多加一些判断：

const MyComponent = props => (
  <div>
    {(props.user.info.addresss && props.user.info.addresss[0].city) || '暂无城市信息'}
  </div>
)

不得不说，这代码写着很累，看着很丑，更别论这段代码里有好几层取值，每一层都可能报错，都判断的话代码就成一坨****。

是时候使用babel新插件babel-plugin-transform-optional-chaining了, 按照这种语法代码就可以这么写：

const MyComponent = props => (
  <div>
    {props?.user?.info?.addresss?.[0]?.city || '暂无城市信息'}
  </div>
)

怎么样,是不是方便很多了呢