循环遍历对象数组以在网格中显示每个值

Question

目前我只得到itemList中每个对象的第一个值:

namedetailtbody> <<tr>

description
1	2	3

您可以使用HTML表来生成这种类型的输出例如

<table>
<thead>
<tr>
<th>name</th>
<th>description</th>
<th>details</th>
</tr>
</thead>
<tbody>
{
itemList.map((item) => {
return <tr>
<td>{item.name}</td>
<td>{item.description}</td>
<td>{item.details}</td>
</tr>
})
}
</tbody>
</table>

我们可以像这样重构handleRender

const handleRender = () => {
return itemList.map((item) => {
return Object.keys(item).map((key, index) => {
return (
<div className="grid-item" key={item.id}>
{item[key]}
</div>
);
});
});
};

您可以使用单个map函数来显示您的项目。并使用属性来显示"单元格"。

export default function Items() {
return (
<div className="grid-container">
<div className="grid-item">name</div>
<div className="grid-item">description</div>
<div className="grid-item">details</div>
{itemList.map((item) => {
return (
<>
<div className="grid-item">{item.name}</div>
<div className="grid-item">{item.description}</div>
<div className="grid-item">{item.details}</div>
</>
);
})}
</div>
);
}

你的css可以像这样:

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

可以使用Object来代替循环。条目来获得JavaScript对象的属性数组，然后为表输出td元素就像您已经成功地用于.map它的行一样简单。

您还可以使用相同的技术提取标题的列名。让他们从第一排开始。注意，这不适用于空表:如果没有行，则不会得到标题。它对属性顺序也很敏感，所以要小心规范化你的数据。

您从示例表中省略了id属性，因此我在这里也使用.filter将其删除。

const itemList = [
{
id: 1,
name: "item1",
description: "description1",
details: "detail1"
},
{
id: 2,
name: "item2",
description: "description1",
details: "detail2"
},
{
id: 3,
name: "item3",
description: "description1",
details: "detail3"
}
];
function Table(props) {
return (
<table>
<thead>
<tr>
{
Object.entries(props.rows[0])
.filter(([key, value]) => key !== 'id')
.map(([key, value]) => (<th key={key}>{ key }</th>))
}
</tr>
</thead>
<tbody>
{
props.rows.map(row => (
<tr>
{
Object.entries(row)
.filter(([key, value]) => key !== 'id')
.map(([key, value]) => (<td key={key}>{ value }</td>))
}
</tr>
))
}
</tbody>
</table>
);
}
ReactDOM.render(
<Table rows={ itemList } />,
document.getElementById("root")
);

table { border-collapse: collapse; }
table, th, td { border: 1px solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>