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

【问题标题】：How do I access elements of an array in a property in Javascript object?如何访问 Javascript 对象的属性中的数组元素？
【发布时间】：2021-06-18 18:29:13
【问题描述】：

以下代码有效：

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/

【问题讨论】：

races 长什么样子？
我很惊讶console.log(races['results']); 给你一个输出，因为在第一次渲染时races.results 也将是未定义的。
渲染是否在等待挂载？如果没有，那么this is a dupe
races 是 {}，从 api 获得响应后，它返回一个带有 2 个属性的 javascript 对象：计数和结果。
只需在上下文中将console.log(races['results']); 更改为console.log(races['results'][0]);，您将获得无效代码

标签： javascript json

【解决方案1】：

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

只需将构造函数更改为：

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

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

【讨论】：