javascript - React.js : can't get an property in an array of objects in render() function

Question

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

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

我收到一个错误:

TypeError: this.state.items[0] is undefined

  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])

它打印出对象

Object { name: "Luke Skywalker", height: "172", mass: "77", hair_color: "blond", skin_color: "fair", eye_color: "blue", birth_year: "19BBY", gender: "male", homeworld: "http://swapi.co/api/planets/1/", films: Array[5], 6 more… }

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

打印出:

Luke Skywalker

这里发生了什么？

Answer 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>
    )
  }