在React中使用index作为键而不是Math.random()更好吗？

Question

以下是我的反应代码,它显示菜单项,不幸的是我没有得到任何id作为列表中的键添加.作为下文档提到的按键部分,它是应尽量避免Math.random().Math.random()在显示菜单列表时,使用索引作为键是否具有高效性和优势？

代码 -

[{name: 'Home'}, {name: 'About'}, {name: 'News'}, {name: 'Contact'}].map((item, index) => {
    return `<li key=${index}>${item.name}</li>`
})

Answer 1

简单地说,我也不会使用它.关键点是<li>在渲染过程中允许React识别您正在创建的子项.

使用随机密钥或数组索引不会提供一致的密钥.

我会为每个对象添加一个ID ...

[
  { id: 1, name: 'Home' },
  { id: 2, name: 'About' },
  { id: 3, name: 'News' },
  { id: 4, name: 'Contact' },
].map(({ id, name }) => {
  return <li key={id}>{name}</li>
})

这样,如果你要重新排序数组,ID就会一致地识别对象.