javascript - 使用 Map() 函数通过 ReactJS 提取双层嵌套的 JSON 数据

Question

我正在尝试提取下面“详细信息”部分下的“图像”对象中的各个图像。

似乎什么也没打印出来。寻找正确的方法来提取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);
});