React应用程序中的map函数仅显示一个结果

Question

我正在尝试从json link获取结果，如下所示：

state = {
   users: []
};
componentDidMount() {
  this.getUsers();
}
getUsers = () => {
axios
  .get("https://api.racidy.com/livetv/uploads/m-jsonobjfin.json")
  .then(data => this.setState({ users: [JSON.parse(data.data.substring(25))] }))
  .catch(err => {
    console.log(err);
    return null;
  });
};

从此代码中，我可以获得我需要的所有数据。但是当我尝试显示结果时：

render() {
  return (
  <Layout>
    <div>
      {this.state.users.length === 0 ? (
        <div>Loading...</div>
      ) : (
        this.state.users.map((e, i) => {
          return <div key={i}>{e.game[i]['imgGame']}</div>;
        })
      )}
    </div>
   ...

render方法上'console.log（this.state.users）'的结果

我只得到一个结果..第一个结果

我做错了什么？

Answer 1

您要迭代的用户，只有一个元素"game"。

您应该改为迭代"game"。

render() {
  return (
  <Layout>
    <div>
      {this.state.users.length === 0 ? (
        <div>Loading...</div>
      ) : (
        this.state.users[0].game.map((e, i) => {
          return <div key={i}>{e['imgGame']}</div>;
        })
      )}
    </div>
   ...