Javascript React.js:can'；t在render（）函数中获取对象数组中的属性

如何在渲染函数中获取对象数组的属性。如果我尝试这样做：

render() {
    console.log(this.state.items[0].name);
 (...)

我有一个错误：

TypeError:此.state.items[0]未定义

它会打印出对象

物体{名称：“卢克·天行者”，身高：“172”，质量：“77”，头发颜色：“金发”，皮肤颜色：“白皙”，眼睛颜色：“蓝色”，出生年份：“19BBY”，性别：“男性”，家庭世界：，，电影：阵列[5]，还有6部……}

当filter函数被激发时，我确实得到了第一个元素的属性 console.log（this.state.items[0].name）

打印出：

卢克·天行者

---

这里发生了什么事

在获取完成之前，不会设置state.items数组。在此之前将调用渲染方法，因此，它将无法按预期工作

如果您重新检查控制台输出，我有一种感觉，在显示您的对象之前，您将看到一些空值或未定义的值

试试这个：

 render() {
    console.log(this.state.items.length > 0 ? this.state.items[0].name : 'Items not loaded yet');
    return (
      <div>
        <input type="text" onChange={this.filter.bind(this)}  />
      </div>
    )
  }

render（）{
console.log（this.state.items.length>0？this.state.items[0]。名称：“尚未加载的项”）；
返回(
)
}

fetch

是异步调用，因此在第一次呈现

此.state期间.items

将

[]

并且您试图访问不存在的第0个item的

名称，因此它会抛出错误

使用时：

console.log(this.state.items);

检查控制台，它正在打印两个值，一个是
[]
，另一个是您从服务器获取的数据

解决方案：

将长度检查放在render中，一旦得到响应，它将打印正确的名称

像这样：

render(){
   if(this.state.items.length)
       console.log(this.state.items[0].name);

   return(
       ....
   )
}

console.log(this.state.items);

render(){
   if(this.state.items.length)
       console.log(this.state.items[0].name);

   return(
       ....
   )
}