Object.keys(Obj[0]).map() :[] 函数的奇怪行为

Question

我正在运行此代码，在这里我给出了硬编码的[0]值，
在<MaterialTable columns={Here using data for table} />中使用这些数据， 它应该只渲染第一行，而是在给出硬编码0后渲染所有行，

这如何导致呈现所有列的所有行并迭代两次？

previewData = [
{id: 1, name: "FileName", size: 15690, type: "doc", Date: "DDMMYY"}
{id: 2, name: "FileName", size: 15690, type: "doc", Date: "DDMMYY"},
{id: 3, name: "FileName", size: 15690, type: "doc", Date: "DDMMYY"},
{id: 4, name: "FileName", size: 15690, type: "doc", Date: "DDMMYY"}
]

Object.keys(props.previewData[0]).map((x) => {
if(x=="id"){return <div>{x}</div>}
) : []

奇怪的工作代码：

const columns = () => {
return (
props.previewData && props.previewData.length > 0 ?
Object.keys(props.previewData[0]).map((x) => {
if (props.Table && props.Table !== "nameTable") {
if (x === "id"){
return ({
title: ,
field: x,
width: "500rem",
sorting: false
})// similar code for other fields also
// this code should gets called only once for array [0], its get iterated over from `.forEach()` from data of MaterialTable How???
}
return (
<MaterialTable
title = ""
icons={}
options={{                
}}
columns={columns()}
data={
props.previewData && props.previewData.length > 0 ? props.previewData.map((row) => {
const eachRowData = {};
Object.keys(row).forEach((y) =>{                        
})
return eachRowData;
}) : []
}
/>

Answer 1

Object.keys(props.previewData[0])

您的示例previewData是：

["id", "name", "size", "type", "Date"]

然后将这些值映射到：

[<div>id</div>, undefined, undefined, undefined, undefined]

因为你使用了map(不是filter)，并且只在x参数的值为"id"时才返回一些东西，这只适用于数组中的五个元素之一。

从你的问题中我不清楚你想做什么，但这就是为什么你会得到一个包含五个元素而不是一个元素的数组。看起来你试图过滤，所以你只产生一个div，但你是根据硬编码值("id")过滤的，这意味着你根本不需要map，你只需要这样做：

<div>{props.previewData[0].id}</div>