錯誤：嘗試為React中的表組件映射嵌套陣列時，物件作為React子項無效

到目前為止，我的代碼運行良好。直到我不得不修改資料檔案并在其中創建一個嵌套陣列。我收到錯誤：物件作為 React 子物件無效（發現：物件帶有鍵 {one、B、C、D、E、G、H、I、L、M、N、P、Q、R、S })。如果您打算渲染一組子項，請改用陣列。

下面是我的表格組件

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",
      }
  }
]

我猜我必須以不同的方式映射它或沿著這些路線繪制它，但無論我在哪里看，我似乎都無法將頭圍繞它。任何人都可以幫助解決這個問題？

uj5u.com熱心網友回復：

由于在您的新結構value中本身就是一個陣列，實際上您有一個嵌套陣列，您可以filterData像這樣更新：

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

標籤：javascript 反应 目的 前端 语法错误

上一篇：OPC DA客戶端工具Opc quick client使用

下一篇：復雜的物件操作