javascript - 我正在尝试使用 "Rick and Morty"REST API 在我的屏幕上呈现名称，但没有任何文字呈现并且我的状态没有更新

Question

我正在使用一个名为“Rick and Morty Rest API”的 API，它基于非常受欢迎的电视节目，我试图在屏幕上呈现 Angular 色的名字，但没有任何显示。

我的 App.js 代码如下:

    state = {
    url: "https://rickandmortyapi.com/api/character",
    character: null
  };

  async componentDidMount() {
    const res = await axios.get(this.state.url);
    this.setState({
      character: res.data.results.forEach(function(element) {
        return element.name;
      })
    });
  }

  render() {
    return (
      <div>
           <h1>{this.state.character}</h1>
      </div>
    );
  }
}

export default App;

我尝试过的:

1. 我已将我的“状态”设置为两个参数，称为 url 和 character。

2. 我正在尝试使用 setState 将我的状态字符更新为名称(我有一个名称列表，这就是我使用 forEach 的原因)

3. 最后在“h1”标签中，我尝试呈现更新状态字符

4. 我没有收到任何错误，并且确实在我的屏幕上呈现。

我已将所有内容按原样推送到我的 github 以供更多引用:https://github.com/abhinav-anshul/Rick-and-Morty-Database

我正在使用的 API 链接:https://rickandmortyapi.com/

Answer 1

定义状态变量character，作为数组:

  state = {
    url: "https://rickandmortyapi.com/api/character",
    character: []
  };

不要使用 forEach，而是将结果保存在您的状态中。

this.setState({
          character: res.data.results
    });  

然后将结果映射到 render 中，如下所示:

{this.state.character.map(character => {
       return(
         <h1>{character.name}</h1>
       )
   })}