Javascript 有没有一种方法可以映射刚刚通过API调用接收到的数据，并在屏幕上显示所有字符名

我使用react fetch方法对starwars 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>
    );
  }




}

---

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

这是什么。state.character.results？results属性从何而来？因此，传入的信息有一个名为results的数组，它包含10个对象，我正试图映射这些对象并获取每个对象的名称。这也是starwar Movies中角色的名称每次我映射到{this.state.charecter.results}上时，我都会得到类型错误：无法读取未定义的属性“map”。嗨，api返回503错误，这不在我的修复能力范围内。除此之外，您还会遇到一个错误，因为当您的组件最初呈现时，它试图在尚未完成获取的对象上运行map。在初始状态下，您希望将加载设置为true。一旦api调用解决，您就可以将其转换为false。然后，在你的渲染方法中，在元素中，你可以检查加载是否正确，比如：{this.state.loading？loading…：/*你调用map here*/}非常感谢！！！这很有效。我现在也得到了503，但在我得到数据之前，我要求的是《星球大战》中的角色名称和属性。我现在收到的数据基本上是一个数组，里面有10个对象，每个对象都有一个名称和高度/重量，我正试图访问这些数据