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>