React 应用程序中的映射函数仅显示一个结果答案

【问题标题】：map function in React app showing only one resultReact 应用程序中的映射函数仅显示一个结果
【发布时间】：2019-12-09 22:44:40
【问题描述】：

我正在尝试从 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>
   ...

'console.log(this.state.users)' 在渲染方法上的结果

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

我做错了什么？

【问题讨论】：

请告诉我们你在render方法中console.log(this.state.users)时的值
也只是关于你的代码的一个旁注，不要使用像i或e这样的变量名。这些不是描述性的，它们很难阅读并增加了不必要的复杂性。也不要使用索引作为键，因为它会在订单更改时随时更改。
它显示了所有的值
@JoeLloyd 我添加了结果截图：i.stack.imgur.com/u7BqN.png
@techipank 解决了我不得不使用的问题：this.state.users[0].game.map

标签： arrays json reactjs axios

【解决方案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>
   ...

【讨论】：

我得到错误：“TypeError：无法读取未定义的属性'map'”
你能提供console.log(this.state.users)在render方法上的结果吗？
如果我看到数据正确，你需要this.state.users[0].game.map