我有一个项目列表,其中包含的数据不足以生成唯一键。如果我使用 uuid 库生成 ID,单个项目的更改是否也会导致其他项目重新呈现,因为它们的 key 每次都会更改?
const people = [
{
gender: 'male',
firstName: 'david',
},
{
gender: 'male',
firstName: 'david',
},
{
gender: 'male',
firstName: 'joe',
},
]
const renderPeople = () => {
return people.map(person => {
return (
<div key={uuid.v4() /* a new value each time? */ }>
<p>{person.gender}</p>
<p>{person.firstName}</p>
</div>
)
})
}
一段时间后......其中一个大卫改变了
const people = [
{
gender: 'male',
firstName: 'david',
},
{
gender: 'male',
firstName: 'davidzz',
},
{
gender: 'male',
firstName: 'joe',
},
]
最佳答案
<div key={uuid.v4()}>
为每个 <div>
分配新 key 每次都这样,所以没用。
如果数组保持不变,则应在创建数组时生成 UUID。
如果数组发生变化,例如从 HTTP 请求接收到的 UUID 将再次生成具有相同内容的元素。
为了避免这种情况,key
应该特定于 person
实体。最好使用内部标识符(数据库 ID),以确保无歧义。
如果标识符不可用,key
可能取决于元素内容:
return (
<div key={JSON.stringify(person)}>
<p>{person.gender}</p>
<p>{person.firstName}</p>
</div>
)
在创建数组时散列一次元素会更有效,例如与
uuid
:import uuidv3 from 'uuid/v3';
...
for (const person of people) {
person.key = uuidv3(JSON.stringify(person), uuidv3.URL);
}
或者使用专用的散列函数,如
object-hash
.请注意,如果存在具有相同内容的元素,散列可能会导致 key 冲突。
关于reactjs - 使用 UUID 作为列表键会导致 React 中不必要的重新渲染吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52705335/