有没有办法映射刚刚通过API调用接收的数据并在屏幕上显示所有字符名称

Question

我使用 react fetch 方法对星球大战 http 进行了 API 调用。 我已经收到了数据，但一旦我映射到数据，似乎无法显示所有字符的名称。

class App extends Component {
  constructor() {
      super()
      this.state = {
          loading: false,
          character: []
      }
  };

  componentDidMount() {
      this.setState({loading: true})
      fetch("https://swapi.co/api/people/?page=2")
          .then(response => response.json())
          .then(data => {
              this.setState({
                  loading: false,
                  character: data
              })
              console.log(this.state.character.results);        
          })
  }

  render() {
    return (
      <div className='dabba'>
        <ul>
            {
                this.state.character.results.map( (person, id) => {
                    return <li key={id}>{person.name}</li>
                } )
            }
        </ul>
      </div>
    );
  }


}

Answer 1

使用 fetch 时，我从该地址收到 503 响应。当您记录响应时，您是否得到了有效的东西？如果没有，map 将无法在未定义的对象上工作，因为它没有"响应"键