使用 Map() function 提取带有 ReactJS 的双嵌套 JSON 数据

Question

我正在尝试在“详细信息”部分下的“图像”object 中提取单个图像。

似乎只是没有打印出来。 寻找在 details.images.image1、2 或 3 中提取的正确方法。

这是我目前正在使用的 JSON 数据：

{
  "books": [
    {
      "title": "title 1",
      "image": "/image1.jpg"
    },
    {
      "title": "title 2",
      "image": "/image2.jpg"
    }
  ],
  "details": [
    {
      "author": "book author",
      "name": "Book name",
      "price": 34.99,
      "publisher": "Penguin Books",
      "images": [
        {
          "image1": "/image1.jpg",
          "image2": "/image2.jpg",
          "image3": "/image3.jpg"
        }
      ]
    }
  ]
}

这也是我在 Book 组件中进行的 JSON 调用：

{staticdata.details.map(detail => (
  <Book
    book_name={detail.author}
    book_price={detail.price}
    image={detail.images.image1}
  />
))}

Answer 1

这是访问这些嵌套属性并将它们记录到控制台的示例。 看来您的尝试大部分是正确的，但images是一个数组。

 const data = { "books": [ { "title": "title 1", "image": "/image1.jpg" }, { "title": "title 2", "image": "/image2.jpg" } ], "details": [ { "author": "book author", "name": "Book name", "price": 34.99, "publisher": "Penguin Books", "images": [ { "image1": "/image1.jpg", "image2": "/image2.jpg", "image3": "/image3.jpg" } ] } ] } data.details.map(detail => { console.log(detail.author, detail.price, detail.images[0].image1); });