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

Posted 2023-03-16

【中文标题】TypeError：尝试在 React 中动态生成表时无法将 undefined 或 null 转换为对象

【英文标题】：TypeError: Cannot convert undefined or null to object when trying to generate a table dynamically in React

【发布时间】：2022-01-12 15:53:36

【问题描述】：

我正在尝试根据获取的数据动态呈现表格。这部分有效，但是当我实现数据的过滤版本时，我在 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，我不知道为什么。有人可以帮我解决这个问题吗？

【问题讨论】：

您的过滤器正在返回一个包含单个元素的数组 - 但您正尝试使用 Object.keys(data[1]) 访问第二个元素

这能回答你的问题吗？ I am getting an error Typerror Cannot read property 'execute' of undefined 或 this 或 this other

@Elikill58 - 这不是这个问题的重复。

@RandyCasburn 愚蠢的错误，你是对的，这就是问题所在。感谢您指出这一点，除此之外，我一直在兜圈子。

【参考方案1】：

您收到此错误是因为data[1]; 返回未定义，因此Object.keys() 无法使用。

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