React动态生成表格时出现Cannot convert undefined or null to object错误如何解决

错误原因 #

1. 过滤后数组长度不足：你新增的过滤逻辑仅会保留id为1的1条数据，处理后得到的filteredData数组长度为1，而数组索引从0开始计数，所以代码中data[1]取值为undefined，将undefined传入Object.keys()就会触发Cannot convert undefined or null to object类型错误。
2. 原有逻辑没有兼容边界情况：未加过滤逻辑时传入的完整数据长度为3，data[1]存在所以可以正常运行，但逻辑本身没有适配数据长度不足、空数据的场景，只要数据长度小于2就会触发报错。

修复方案 #

调整表头取值逻辑，取数组第一个元素的键生成表头，同时增加空数据校验，同时修正JSX属性的驼峰命名问题，修正后的代码如下：

import React from "react";
import tableData from "./tableData1.js";

const TableComponent = ({ data }) => {
  // 增加空数据判断，避免报错
  if (!data || data.length === 0) return <div>暂无表格数据</div>;
  // 取第一个元素的键生成表头，所有数据结构一致的情况下无需取索引1的元素
  let headings = Object.keys(data[0]);
  return (
    <table className="table table-dark table-striped">
      <thead>
        <tr>
          {/* JSX中属性要使用驼峰命名，colspan改为colSpan */}
          <th colSpan="16">Dimensions in mm</th>
        </tr>
        <tr>
          <th>Series</th>
          {headings.map((heading) => (
            <th key={heading} scope="col">{heading}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <th scope="row">Series No.</th>
            {headings.map((heading) => (
              <td key={heading}>{item[heading]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

const TableGenerator = () => {
  const filteredData = tableData.filter(item => item.id == 1).map(item => item.value);
  return <TableComponent data={filteredData} />;
};

export default TableGenerator;

补充说明 #

• 所有循环渲染的列表元素都需要加key属性，避免React抛出警告
• 空数据判断逻辑可以根据业务需求调整，替换为自定义的空状态UI
• 如果存在部分数据结构不一致的场景，可以额外增加对data[0]类型的校验，避免非对象值传入Object.keys()触发报错

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