时间戳

首页 > 解决方案 > 我正在尝试使用“Rick and Morty”REST API 在我的屏幕上呈现名称，但没有任何文字呈现，而且我的状态没有更新

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

问题描述

我正在使用一个名为“Rick and Morty Rest API”的 API，它基于非常流行的电视节目，我正在尝试在屏幕上呈现角色的名称，但没有显示任何内容。

我的 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 和字符。

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

  3. 最后在“h1”标签中，我试图呈现 UPDATED STATE 字符

  4. 我没有收到错误，并且绝对是在我的屏幕上呈现。

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

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

标签： javascriptreactjsrestapi

解决方案

将状态变量 定义character为数组：

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

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

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

然后将结果映射到渲染中，如下所示：

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

推荐阅读