如何访问Javascript对象中属性中的数组元素

Question

以下代码有效：

import React, { Component } from 'react';
import './App.css';
import Menu_dropdown from "./component/menu_dropdown";
class App extends Component {
constructor() {
super()
this.state = {
races: {}
}
}
componentDidMount(){
fetch('https://www.dnd5eapi.co/api/races/')
.then(response=> response.json())
.then(races => {this.setState({ races : races})});
}

render(){
const { races } = this.state;
console.log(races['results']);
return (
<div className="App">
<header className="App-header">
<Menu_dropdown races = {races}/>
</header>
</div>
);
}

}
export default App;

控制台将输出一系列比赛。然而，它给了我"；TypeError:无法读取未定义的"的属性"0"；当我换成这个时

console.log(races['results'][0]);

为什么结果不是数组？您可以在此处查看源json：https://www.dnd5eapi.co/api/races/

Answer 1

当状态第一次初始化为{ races: {}}时，races.results将是未定义的，您无法从未定义中获取任何元素。

只需将构造函数更改为：

constructor() {
super()
this.state = {
races: {results: []}
}
}

这样，组件可以在加载时呈现空数组，并在解析fetch调用时呈现fetch结果。