React读取JSON数据报Cannot read properties of undefined错误

问题场景 #

在React.js项目中尝试展示JSON格式的产品数据时，抛出上述报错，耗时2天排查未找到根因。
涉及的JSON源文件products.json内容如下：

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

编写的业务逻辑代码如下：

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

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

报错根因 #

Object.keys(backendData)会返回backendData自身所有可枚举属性组成的数组，顺序为["product-1", "product-2", "product-3"]。经过map遍历后，productsData是一个长度为3的数组，每个元素为单个键值对结构：

• 第0项：{ "product-1": [{id: 1, name: "product-1"}] }
• 第1项：{ "product-2": [{id: 2, name: "product-2"}] }
• 第2项：{ "product-3": [{id: 3, name: "product-3"}] }

代码中访问productsData[0].products时，数组第0项根本不存在products属性，拿到的值是undefined，后续尝试读取undefined的product-1属性就会触发类型错误。

修复方案 #

根据实际业务需求二选一即可：

• 如果不需要额外包装products层级，直接修正属性访问路径：

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

• 如果业务逻辑要求数据挂载在products字段下，不要用map生成数组结构，直接组装对象即可：

const productsData = {
  products: backendData
}
// 原有访问逻辑可正常运行
console.log(productsData.products["product-1"][0].id)

内容的提问来源于stack exchange，提问作者Peter Dermek