[英]Error: Objects are not valid as a React child when trying to map a nested array for a table component in React
到目前為止,我的代碼運行良好。 直到我不得不修改數據文件並在其中創建一個嵌套數組。 我收到錯誤消息:對象作為 React 子對象無效(發現:object 鍵為 {one, B, C, D, E, G, H, I, L, M, N, P, Q, ZE1E1D3D40573183E96 })。 如果您打算渲染一組子項,請改用數組。
下面是我的表格組件
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",
}
}
]
我猜我必須 map 以不同的方式或類似的方式,但無論我在哪里看,我似乎都無法繞開它。 任何人都可以幫助解決這個問題?
由於在您的新結構中value
本身就是一個數組,實際上您有一個嵌套數組,您可以像這樣更新您的filterData
:
const filteredData = tableData.filter(item => item.id == targetID).reduce((acc, item)=>{
acc = [...acc, ...item.value]
return acc;
} , []);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.