TypeError:无法读取未定义的属性(读取“Product-1”)

Question

因此，我试图在我的React.js项目中显示JSON数据，但是我得到了一个我找不到的错误。我花了两天的时间想办法弄清楚，但没有运气

JSON数据：(文件名: products.json)

{
    "product-1": [
        {
            "id": 1,
            "name": "product-1",
        }
    ],

    "product-2": [
        {
            "id": 2,
            "name": "product-2",
        }
    ],

    "product-3": [
        {
            "id": 3,
            "name": "product-3",
        }
    ]
}

我的javascript：

  const productsData = Object.keys(backendData).map(key => {
    return {
        [key]: backendData[key]
    }
  })

  console.log(productsData[0].products["product-1"][0].id)

错误：

​

backEndData日志：

​

Answer 1

因为productsData会像这样返回数组：

    [ 
        { "product-1": [
            {
                "id": 1,
                "name": "product-1",
            }
        ]}, 
        {"product-2": [
            {
                "id": 2,
                "name": "product-2",
            }
        ]}, .... 
    ]

这意味着这是一个对象数组，其中每个对象都有一个键值对，其中键是名称，值是一个数组。如果您想访问id，那么应该这样做：

productsData[0]["product-1"][0].id

在OP更新后更新

由于您的backendData值与product.json不匹配，所以我将忽略该product.json，并为您刚才提供的backendData值编写解决方案。

const productsData = backendData.products;
const id = productsData[0]["product-1"][0].id;