React组件render中取state数组属性返回undefined，console.log却正常

问题原因 #

组件初始化时，this.state.items的初始值多半没有data属性或者data是空数组，而componentDidMount是在第一次render完成后才会执行API请求，请求是异步的，所以第一次render的时候，this.state.items.data[0]根本不存在，访问.name自然返回undefined。

你在render外部执行的console.log，应该是在API请求完成、state更新之后才触发的（比如放在请求回调或componentDidUpdate里），这时候state已经有了正确数据，所以能正常输出。

修复方法 #

1. 初始化state时设置默认值 #

在组件初始化state时，给items.data设置默认空数组，避免初始render时找不到属性：

// 类组件构造函数写法
constructor(props) {
  super(props);
  this.state = {
    sampleValue: '',
    items: {
      data: [] // 初始化空数组
    }
  };
}

// 或者类字段语法写法
state = {
  sampleValue: '',
  items: {
    data: []
  }
}

2. render中添加条件判断 #

在render里先判断data[0]是否存在，再访问name：

render() {
  const { items } = this.state;
  return (
    <header className="menu">
      <div>
        {this.state.sampleValue}
        {/* 先确认data存在且有第一个元素 */}
        {items.data && items.data[0] ? items.data[0].name : ''}
      </div>
    </header>
  );
}

3. 使用可选链操作符（推荐） #

ES2020的可选链可以简化判断，链路上只要有一个值不存在就返回undefined，不会触发报错：

render() {
  return (
    <header className="menu">
      <div>
        {this.state.sampleValue}
        {this.state.items.data?.[0]?.name}
      </div>
    </header>
  );
}

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