如何从多层嵌套对象提取数据生成Material-UI Table要求的格式

你现有代码存在两个核心问题：

• parsedData 声明为对象，且循环内直接覆盖属性，最终只能拿到最后一条记录的结果，而表格需要的是包含多个对象的数组
• 直接访问深层嵌套属性时，只要中间某一级属性不存在就会抛出类型错误，需要加安全访问逻辑

完整实现代码 #

const parseTableData = arrCollection => {
  // 初始化结果为数组，完全匹配Material-UI Table要求的data格式
  const parsedData = [];
  // 遍历所有记录
  for (const property in arrCollection) {
    const record = arrCollection[property];
    // 用可选链安全访问深层属性，配合空值合并设置兜底内容，避免属性不存在时报错
    parsedData.push({
      white: record?.players?.white?.user?.name ?? '未知用户',
      black: record?.players?.black?.user?.name ?? '未知用户',
      whiteRating: record?.white?.rating ?? '无评级',
      blackRating: record?.black?.rating ?? '无评级',
      speed: record?.speed ?? '未知类型' // 按需补充你需要的其他字段即可
    });
  }
  // 处理完成的数组可直接传给Table组件的data属性
  return parsedData;
};

兼容方案（运行环境不支持ES2020新特性时使用） #

如果你的项目没有配置可选链、空值合并的语法支持，可以用逻辑与实现安全访问：

white: ((((record || {}).players || {}).white || {}).user || {}).name || '未知用户'

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