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;

控制台将输出一个种族数组。但是，当我更改为这个时，它给了我“类型错误：无法读取未定义的属性 '0'”

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

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

Answer 1

当 state 首次初始化为 { races: {}} 时，races.results 将是 undefined 并且你无法从 undefined 中获取任何元素。

只需将构造函数更改为：

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

通过这种方式，组件可以在加载时呈现一个空数组，并在解析调用时呈现 fetch 结果。

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

1 个答案: