Question

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

看起来很简单，但我可以摆脱它。
预先感谢您的帮助！

Answer 1

这里有很多事情！

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

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

Answer 2

基于我们可以从您的代码中掌握的信息：

该列表是一个object，其中包含array和objects的{{1}}。如果是这种情况，则可以执行：{'artisans' => [{}, {}, {}...]}。

要使其在JSX中与React一起使用，您应该这样做：

aristArray.artists.map((artisan) => console.log(artisan.name));

如果您不确切了解发生了什么，请检查.map()方法的作用。

Answer 3

感谢大家的回答！但在第一种情况下，我总能得到

TypeError: Cannot read property 'map' of undefined

我得到的意思是“艺术家”没有作为数组传递给道具。

第二个答案，我无法修改API，因此可以创建一个常量。

总而言之，我弄错了这是API

...
    "data_quality": "Needs Vote"
  },
  "artists": [
    {
      "name": "Artist 1",
      "id": 1
    },
    {
      "name": "Artist 2",
      "id": 2
    },
    {
      "name": "Artist 3",
      "id": 3
    },
    {
      "name": "Artist 4",
      "id": 4
    }
  ],
  "format_quantity": 1,
  "id": 12345,
  "artists_sort": "Artist",
  "genres": [
    "Electronic",
    "Rock"
  ]
....

因此，“艺术家”数组进入了更广泛的API。而且我必须传递诸如此类的道具：

render() {
    const {
      artists
    } = this.props.record;

从那里我必须拉出“ name”和“ id”

奇怪的是我是从控制台获得的

第一次找不到，然后在没有任何重新加载的情况下找到它。

对不起，但我想使其尽可能简单。

有什么主意吗？

再次感谢

React Complex Array，如何提取值？

3 个答案: