React Complex Array，如何提取值？答案

【问题标题】：React Complex Array, how to extract values?React Complex Array，如何提取值？
【发布时间】：2025-11-28 14:55:01
【问题描述】：

我是新手，我希望不要问什么傻事，但我正在疯狂地寻找解决方案！
对于我的应用，我使用的是公共 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); 给我错误或未定义。我该怎么办？

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

【问题讨论】：

标签： arrays json reactjs dictionary foreach

【解决方案1】：

根据我们可以从您的代码中掌握的信息：

该列表是一个 object，其中包含 array 或 objects ala {'artisans' => [{}, {}, {}...]}。如果是这种情况，您可以这样做：aristArray.artists.map((artisan) => console.log(artisan.name));。

要让它在 JSX 中与 React 一起工作，你应该这样做：

return (
      <Fragment>
        <div className="container">
          <h1 className="display-3">
            {
              aristArray.artists.map((artisan) => artisan.name + " " + artisan.id);
            }
        </h1>
      </Fragment>
    );
 }

如果你不明白到底发生了什么，请检查 .map() 方法的作用。

【讨论】：

【解决方案2】：

这里发生了很多事情！

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

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 docs 仔细看看

【讨论】：