时间戳

首页 > 解决方案 > React Complex Array，如何提取值？

arrays - React Complex Array，如何提取值？

问题描述

我是一个新手，我希望不要问什么傻事，但我正在疯狂地寻找解决方案！
对于我的应用程序，我使用的是公共 API
，我需要的部分是这个（短版本，因为它很大）

{
  "artists": [
    {
      "name": "Artist 1",
      "id": 1
    },
    {
      "name": "Artist 2",
      "id": 2
    },
    {
      "name": "Artist 3",
      "id": 3
    },
    {
      "name": "Artist 4",
      "id": 4
    }
  ]
}

渲染：

render() {
    const {
      name,
      id
    } = this.props.record;

功能：

 [artistsArray].forEach(item => {
      console.log(item);
      console.log(item.artists[0].name);
    });

输出：

return (
      <Fragment>
        <div className="container">
          <h1 className="display-3">
            {name} {id}
        </h1>
      </Fragment>
    );
  }

问题是我无法获取名称和 ID。
console.log(item); console.log(item.artists[0].name);给我错误或未定义。我能怎么做？

看起来很简单，但我可以摆脱这个。
提前感谢您的帮助！

标签： arraysjsonreactjsdictionaryforeach

解决方案

这里发生了很多事情！

这是我将如何完成您正在尝试做的事情的示例：

const artists = [
  {
    "name": "Artist 1",
    "id": 1
  },
  {
    "name": "Artist 2",
    "id": 2
  },
  {
    "name": "Artist 3",
    "id": 3
  },
  {
    "name": "Artist 4",
    "id": 4
  }
]

render() {
  return (
    <div>
      {
        artists.map((artist, artistIndex) => {
          return (
            <div key={artistIndex} className="container">
              <h1 className="display-3">
                {artist.name}  {artist.id}
              </h1>
            </div>
          )
        })
      }
    </div>
  )
}

您似乎混淆了几种不同的语法，如果我是您，我会回到React 文档并仔细查看

推荐阅读