React JS中获取嵌套对象数组值返回undefined如何解决

问题背景 #

需要从对象数组结构的data.json中提取值，计划使用map方法遍历层级为数组 -> 对象 -> 数组 -> 对象（即[{[{}]}]结构）的JSON数据，但读取内层对象数组的属性值时始终得到undefined，尝试多种实现方式都未解决。

示例JSON数据源 #

[
  {
    "key": "row-0",
    "cells": [
      {
        "key": "cell-0",
        "id": "ID-0",
        "headerName": "Name",
        "CustomerName": "ABC"
      },
      {
        "key": "cell-1",
        "id": "ID-1",
        "headerName": "RegID",
        "CustomerID": "P-01"
      },
      {
        "key": "cell-2",
        "id": "ID-2",
        "headerName": "Detail",
        "Deatil": "Abc"
      }
    ]
  },
  {
    "key": "row-1",
    "cells": [
      {
        "key": "cell-1",
        "id": "ID-1",
        "headerName": "Name",
        "CustomerName": "CDE"
      },
      {
        "key": "cell-2",
        "id": "ID-2",
        "headerName": "RegID",
        "CustomerID": "P-02"
      },
      {
        "key": "cell-3",
        "id": "ID-3",
        "headerName": "Detail",
        "Deatil": "CDE"
      }
    ]
  }
]

原有问题代码 #

{mockData.map((values, index) => {
  console.log("VALUES", values);
  return values.cells.map(({ headerName, ...rest }) => {
    console.log("JSON", JSON.stringify(rest));
    console.log("REST", rest.CustomerName); // 此处始终返回undefined
  });
})}

问题原因 #

出现undefined和你的map遍历写法无关，核心问题是cells数组内的对象字段不统一：

• 仅headerName值为Name的单元格存在CustomerName属性
• headerName值为RegID的单元格对应ID字段为CustomerID，无CustomerName属性
• headerName值为Detail的单元格不仅属性名拼写错误（写为Deatil，正确拼写应为Detail），同样不存在CustomerName属性

你遍历所有单元格时无差别读取CustomerName，非Name列的单元格自然返回undefined。

修复方案 #

根据实际业务需求选择对应写法即可：

方案1：仅提取Name列的客户名称 #

如果只需要获取客户名称字段，遍历行时先匹配到Name对应的单元格再取值，避免读取其他无该字段的单元格：

{mockData.map((row) => {
  // 查找当前行中headerName为Name的单元格
  const nameCell = row.cells.find(cell => cell.headerName === "Name");
  // 做空值兼容，避免极端情况单元格不存在时报错
  const customerName = nameCell?.CustomerName || "";
  // 后续直接使用customerName即可，不会出现undefined
  return <div key={row.key}>{customerName}</div>
})}

方案2：格式化所有行数据为统一结构 #

如果需要使用每行的全量字段，可遍历单元格将数据组装为结构统一的对象，后续直接读取对象属性即可：

const formattedList = mockData.map(row => {
  const rowData = {
    rowKey: row.key,
    customerName: "",
    customerId: "",
    detail: ""
  };
  row.cells.forEach(cell => {
    switch(cell.headerName) {
      case "Name":
        rowData.customerName = cell.CustomerName;
        break;
      case "RegID":
        rowData.customerId = cell.CustomerID;
        break;
      case "Detail":
        // 注意原数据中Detail字段拼写错误，此处要和数据源字段名保持一致
        rowData.detail = cell.Deatil;
        break;
    }
  })
  return rowData;
})

格式化后得到的数据结构如下，读取属性不会出现undefined问题：

[
  { "rowKey": "row-0", "customerName": "ABC", "customerId": "P-01", "detail": "Abc" },
  { "rowKey": "row-1", "customerName": "CDE", "customerId": "P-02", "detail": "CDE" }
]

提示：建议修正数据源中Deatil的拼写错误，统一字段命名可以避免后续出现更多无意义的取值问题。

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