React.js：无法在渲染（）函数中获取对象数组中的属性答案

【问题标题】：React.js: can't get an property in an array of objects in render() functionReact.js：无法在渲染（）函数中获取对象数组中的属性
【发布时间】：2017-12-22 07:26:12
【问题描述】：

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

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

我收到一个错误：

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

  class App extends React.Component {
  constructor() {
    super()

    this.state = {
      items: []
    }
  }
  componentWillMount() {
    fetch('http://swapi.co/api/people/?format=json')
      .then((response) => response.json())
        .then(({ results: items }) => this.setState({ items }))
  }

  filter(e){
    this.setState({ filter: e.target.value })
    console.log(this.state.items[0].name);
  }

  render() {
    console.log(this.state.items[0].name);
    return (
      <div>
        <input type="text" onChange={this.filter.bind(this)}  />
      </div>
    )
  }

}
export default App

但是，如果我只注销数组的第一个元素

 console.log(this.state.items[0])

它打印出对象

对象{名称：“卢克天行者”，身高：“172”，质量：“77”，头发颜色：“金发”，皮肤颜色：“公平”，眼睛颜色：“蓝色”，出生年份：“19BBY”，性别： “男”，家乡：“http://swapi.co/api/planets/1/”，电影：Array[5]，还有 6 个……}

当过滤器函数被触发时，我确实得到了第一个元素的属性 console.log(this.state.items[0].name)

打印出来：

卢克·天行者

这里发生了什么？

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

在您的获取完成之前，您的 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>
    )
  }

【讨论】：

【解决方案2】：

fetch 是异步调用，所以在第一次渲染时this.state.items 将[] 并且您试图访问不存在的第 0 个项目的name，因此它会抛出错误.

使用时：

console.log(this.state.items);

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

解决方案：

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

像这样：

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

   return(
       ....
   )
}

【讨论】：