javascript - ReactJs-我无法在axios循环之外捕获变量

我有一个JSON DB和一个React组件来获取这些数据。
这是我的JSON DB：

{
  "houses": [
    {
      "id": 1,
      "name": "house 1"
    },
    {
      "id": 2,
      "name": "house 2"
    },
    {
      "id": 3,
      "name": "house 3"
     }
  ]
}

它是由ReactJS组件获取的。当我在Axios的循环中执行console.log（）时，它可以成功运行。但是在render方法内部，它不起作用。我该如何解决？

class Houses extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index:0,
      currentHouse:[]
    };
  }

  componentDidMount() {
    axios.get(URL_HOUSES)
      .then(res => {
        this.setState({ index:0 })
        this.setState({ currentHouse: res.data})
        //Here is working! It is returning the index and the current house's name
        console.log('index:' + this.state.index)
        console.log(
                     'Name of the current house:' +
                      this.state.currentHouse[this.state.index].name
                    )
    }

  render() {

    return (
      <div>
        //Here isn't working. It is returning an error message:
        //TypeError: Cannot read property '0' of undefined

        <h3>{this.state.currentHouse[this.state.index].name}</h3>
      </div>
    );
  }
}


export default Houses

最佳答案

TL; DR在render方法中显示它之前检查初始currentHouse数组。

在组件的初始渲染中，currentHouse数组中没有元素。

因此，当您的组件尝试打印您的语句this.state.currentHouse[this.state.index].name时，它实际上试图执行的操作是找到一个空数组[]的第0个位置。这将评估为undefined。

解决此问题的选项是在状态下为currentHouse数组设置一个初始值，或检查数组中是否有值。例如：

 <h3>{this.state.currentHouse.length && this.state.currentHouse[this.state.index].name}</h3>