TypeError：在React中尝试动态生成表时，无法将未定义或null转换为对象

Question

我正在尝试根据表所获得的数据动态呈现表。这一部分是有效的，但是当我实现了数据的过滤版本时，我在let headings=object.key（data[1]）行上得到了TypeError Undefined或Null to object错误。

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

const TableComponent = ({ data }) => {
**let headings = Object.keys(data[1]);** //This is where I get the Error
  return (
    <table className="table table-dark table-striped">
      <thead>
        <tr>
          <th colspan="16">Dimensions in mm</th>
        </tr>
        <tr scope="col">
          <th>Series</th>
          {headings.map((heading) => (
            <th>{heading}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr scope="col">
            <th scope="row">Series No.</th>
            {headings.map((heading) => (
              <td>{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;

以下是供参考的数据（目前只是一些模拟数据）：

const tableData1 = [
  {
    id: 1,
    value: {
      A: "Value",
      B: "Value",
      C: "Value",
      D: "Male",
      E: "Value",
      G: "Value",
      H: "Value",
      I: "Value",
      L: "Value",
      M: "Value",
      N: "Value",
      P: "Value",
      Q: "Value",
      R: "Value",
      S: "Value",
    }
  },
  {
    id: 2,
    value: {
      A: "Value",
      B: "Value",
      C: "Value",
      D: "Male",
      E: "Value",
      G: "Value",
      H: "Value",
      I: "Value",
      L: "Value",
      M: "Value",
      N: "Value",
      P: "Value",
      Q: "Value",
      R: "Value",
      S: "Value",
    }
  },
  {
    id: 3,
    value: {
      A: "Value",
      B: "Value",
      C: "Value",
      D: "Male",
      E: "Value",
      G: "Value",
      H: "Value",
      I: "Value",
      L: "Value",
      M: "Value",
      N: "Value",
      P: "Value",
      Q: "Value",
      R: "Value",
      S: "Value",
    }
  },
];

export default tableData1;

它在我添加const filteredData部分之前工作，我将tableData直接传递到TableComponent，我不知道为什么。有人能帮我吗？

Answer 1

您得到这个错误是因为data[1]；返回未定义，因此不能被Object.keys（）使用。

这可能意味着您的Filteredata被过滤错误，或者您在错误的索引处访问它。