Javascript Can'；无法从fetch获取JSON列表

大家好，我正在使用星球大战API在ReactJS中进行实验

我想收集以下形式的人员：

{
    "count": 87,
    "next": "https://swapi.co/api/people/?page=2",
    "previous": null,
    "results": [
        {
            "name": "Luke Skywalker",
            "height": "172",
            "mass": "77",
            "hair_color": "blond",
            "skin_color": "fair",
            "eye_color": "blue", ... (continues)

由于我可以提取单个字符，我知道提取机制正在工作，但我无法获取结果中的字符列表

我的应用程序如下：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Character from './Character'
class App extends Component {
  constructor() {
    super()
    this.state = {
      people : {},
      character: {}
    }
    fetch("https://swapi.co/api/people/1")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    character: data
                })
            })

    fetch("https://swapi.co/api/people/")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    people: data
                })
            })
    console.log(this.state.people)
    console.log(this.state.people.results)
  }
  render() {
    return (
      <div className="App">
        <Character
          character = { this.state.character}
        />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./字符”导入字符
类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
人民：{}，
字符：{}
}
取回（“https://swapi.co/api/people/1")
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
字符：数据
})
})
取回（“https://swapi.co/api/people/")
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
人物：数据
})
})
console.log（this.state.people）
console.log（this.state.people.results）
}
render（）{
返回(
);
}
}
导出默认应用程序；

我是从console.log中获得这些信息的（其余的是针对单个字符的，它工作正常）

第一个console.log为我提供了一个（在firefox webconsole中）

对象{}

第二个给我未定义的

我已经尝试了很多东西，但似乎找不到如何获取字符列表。我缺少什么？

1）您应该将请求调用移动到componentDidMount生命周期方法

2） setState方法是异步的，因此记录该值可能无法在该时刻给出正确的值。要获取属性的正确值，请使用第二个参数（函数），该参数将在状态更新后调用

class App extends Component {
  constructor() {
    super()
    this.state = {
      people : [], // it should an array
      character: {}
    }
  }

  componentDidMount() {
    fetch("https://swapi.co/api/people/1")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    character: data
                }, () => console.log(this.state.character))

            })

    fetch("https://swapi.co/api/people/")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    people: data.results
                }, () => console.log(this.state.people.results))

            })

  }

  render() {
    return (
      <div className="App">
        <Character
          character = { this.state.character}
        />
      </div>
    );
  }
}

export default App;

类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
人员：[]，//它应该是一个数组
字符：{}
}
}
componentDidMount（）{
取回（“https://swapi.co/api/people/1")
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
字符：数据
}，（）=>console.log（this.state.character））
})
取回（“https://swapi.co/api/people/")
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
人物：数据。结果
}，（）=>console.log（this.state.people.results））
})
}
render（）{
返回(
);
}
}
导出默认应用程序；

1）您应该将请求调用移动到componentDidMount生命周期方法

2） setState方法是异步的，因此记录该值可能无法在该时刻给出正确的值。要获取属性的正确值，请使用第二个参数（函数），该参数将在状态更新后调用

class App extends Component {
  constructor() {
    super()
    this.state = {
      people : [], // it should an array
      character: {}
    }
  }

  componentDidMount() {
    fetch("https://swapi.co/api/people/1")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    character: data
                }, () => console.log(this.state.character))

            })

    fetch("https://swapi.co/api/people/")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    people: data.results
                }, () => console.log(this.state.people.results))

            })

  }

  render() {
    return (
      <div className="App">
        <Character
          character = { this.state.character}
        />
      </div>
    );
  }
}

export default App;

类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
人员：[]，//它应该是一个数组
字符：{}
}
}
componentDidMount（）{
取回（“https://swapi.co/api/people/1")
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
字符：数据
}，（）=>console.log（this.state.character））
})
取回（“https://swapi.co/api/people/")
.then（response=>response.json（））
。然后（数据=>{
这是我的国家({
人物：数据。结果
}，（）=>console.log（this.state.people.results））
})
}
render（）{
返回(
);
}
}
导出默认应用程序；

您应该将此作为使用React挂钩的机会。这是未来你应该利用这个机会使用React钩子。将来您必须将console.log（）放在异步函数中您必须将console.log（）放在异步函数中jfyi:Hooks仅适用于功能组件，并且仅适用于React>=16.7。该信息不是为您提供的，而是为阅读您答案的其他人提供的。钩子在16.8中是稳定的，但在16.7中在一个特性标志后面实现。JFYI：钩子只适用于功能组件，并且只适用于React>=16.7。该信息不是为您提供的，而是为阅读您答案的所有其他人提供的。钩子在16.8中是稳定的，但在16.7中在特性标志后面实现。