Error: Objects are not valid as a React child when trying to map a nested array for a table component in React

Question

到目前为止，我的代码运行良好。直到我不得不修改数据文件并在其中创建一个嵌套数组。我收到 Error: Objects are not valid as a React child (found: object with keys {one, B, C, D, E, G, H, I, L, M, N, P,问，R，S}）。如果您打算呈现子项集合，请改用数组。

下面是我的Table组件

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

const TableComponent = ({ data }) => {
let headings = Object.keys(data[0]);
  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 = ( {targetID} ) => {
  const filteredData = tableData.filter(item => item.id == targetID ).map(item => item.value);
  return <TableComponent data={filteredData} />;
};

export default TableGenerator;

这是目前仅使用一些模拟数据进行测试的数据文件。

const tableData1 = [
  {
    id: 1,
    value: [
      {
        one: "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",
      },
      {
        one: "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: [
      {
        two: "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",
      },
      {
        two: "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",
      },
    ],
  }
]

之前我的格式如下：

const tableData1 = [
  {
    id: 1,
    value:
      {
        one: "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:
      {
        two: "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",
      }
  }
]

我想我必须以不同的方式绘制它或沿着这些路线绘制一些东西，但无论我在哪里看，我似乎都无法理解它。任何人都可以提供帮助吗？

Answer 1

因为在你的新结构中 value 本身就是一个数组，实际上你有一个嵌套数组，你可以像这样更新你的 filterData：

const filteredData = tableData.filter(item => item.id == targetID).reduce((acc, item)=>{
  acc = [...acc, ...item.value]
  return acc;
} , []);

Error: Objects are not valid as a React child when trying to map a nested array for a table component in React

Error: Objects are not valid as a React child when trying to map a nested array for a table component in React

javascript

frontend

object

syntax-error

reactjs