React中三元运算符的坑

在React中state的定义中有一个坑不易被发现，主要是state属性未被定义就是使用，需要用到三位运算符：
举个栗子：

class App extends Component{
  this.state={

  }
  componentDidMount(){
    请求后端接口拿到数据data,data是一个对象数组
  }
  // 然后将data保存在当前状态之中
  this.setState({
    data:DataTransferItem
  })
  // 渲染到页面上
  render(){
    return(
      <div>
        {this.state.data[0].name}
      </div>
    )
  }
}

是会报错的，原因有几点：

• render在componentDidMount之前运行，此时state中没有data
• 就算定义初始时状态data:[]，还是会报错的，只加这一个还不够。此时this.state.data是一个空数组，获取不到this.state.data[0].name，渲染到页面上的时候还是会报错。
  代码需要改进，主要是两个方面：

1. 初始state定义
2. 用三元运算符判断state.data

class App extends Component{
  this.state={
		data:[]
  }
  componentDidMount(){
    请求后端接口拿到数据data,data是一个对象数组
  }
  // 然后将data保存在当前状态之中
  this.setState({
    data:DataTransferItem
  })
  // 渲染到页面上
  render(){
    return(
      <div>
        {this.state.data.length!==0?this.state.data[0].name:''}
      </div>
    )
  }
}

总结：代码要规范，初始状态要定义，数据为空要判断。