向映射函数添加键不起作用

Question

我目前正在尝试向映射添加一个键。然而，当我尝试给它一个索引时，它会显示为未定义的人。它以前在哪里工作。以下是我所做的。

<div className='UserAdminCardsGrid'>
{personValues.map(person, index =>
<div key={index} className="UserAdminCard Card">
<b>Name:</b>
<div>{person.name}</div>
<b>ID:</b>
<div>{person.id}</div>
</div>
)}
</div>

Answer 1

这是一个错误的语法

personValues.map(person, index =>

将参数括在括号中

personValues.map((person, index) =>

Answer 2

在箭头函数中添加括号：

<div className='UserAdminCardsGrid'>
personValues.map((person, index) =>
<div key={index} className="UserAdminCard Card">
<b>Name:</b>
<div>{person.name}</div>
<b>ID:</b>
<div>{person.id}</div>
</div>
)}
</div>

Answer 3

将参数括在括号中或使用对象id

地图函数索引的包装与使用

personValues.map((person, index) =>

或使用对象id作为密钥(建议使用(

{personValues.map(person =>
<div key={person.id} className="UserAdminCard Card">
<b>Name:</b>
<div>{person.name}</div>
<b>ID:</b>
<div>{person.id}</div>
</div>
)}

索引作为关键是反模式

它可能会破坏您的应用程序并显示错误的数据！

将索引作为关键字是一种反模式文章以更好地理解。

Answer 4

<div className='UserAdminCardsGrid'>
{personValues.map(({id, name}) =>
<div key={id} className="UserAdminCard Card">
<b>Name:</b>
<div>{name}</div>
<b>ID:</b>
<div>{id}</div>
</div>
)}
</div>