Question

我正在使用一个名为“ 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;

我试图做的事情：

我将“状态”设置为两个参数，分别称为url和character。
我正在使用setState将状态字符更新为name（我有一个名字列表，这就是为什么我使用forEach的原因）
最后在“ h1”标签中，我试图呈现“更新后的状态”字符
我没有收到错误，并且绝对在屏幕上呈现。

我已将所有内容推送到我的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
    });

然后在渲染器内部映射结果，如下所示：

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

Answer 2

设置状态时无需遍历每个元素，这就是为什么您无法呈现任何内容的原因，因为在循环结束时状态仍未定义。在这种情况下，请始终使用替代方法，例如使用扩展运算符或串联。就您而言，可能是这样的：

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

之后，使用任何辅助方法（地图，forEach等）遍历字符数组。在状态中将字符分配给空数组不是强制性的，但是在状态中使用相同类型的变量/数组/对象始终是一个好习惯，您希望稍后在代码中使用该类型。就目前而言，您的character: null也可以正常工作。

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

2 个答案: