React JSX中使用map函数遍历如何定义唯一key？

核心问题修正 #

你遇到的报错主要来自两个问题：

• 拼写错误：你写的是keys={item.title}，React要求的是单数的key属性，复数写法完全不生效。
• 唯一性风险：如果数组里存在重复的title，用它当key会导致React无法正确识别元素，依然会触发报错。

正确实现方式 #

情况1：数组对象有唯一ID（推荐方案）

如果你的数据对象自带唯一标识（比如id字段），直接用它作为key：

{yourArray.map(item => (
  <div key={item.id}>
    <h3>{item.title}</h3>
    <p>{item.content}</p>
  </div>
))}

情况2：无唯一ID但title绝对唯一

确认所有title不会重复的前提下，修正拼写为key即可：

{yourArray.map(item => (
  <div key={item.title}>
    <h3>{item.title}</h3>
    <p>{item.content}</p>
  </div>
))}

情况3：无任何唯一属性（仅临时应急，不推荐）

如果数据里没有任何唯一字段，可使用map的第二个参数index作为key，但注意：当数组元素顺序会变化时，用index会导致性能问题或渲染错误，仅适合静态不变的数组：

{yourArray.map((item, index) => (
  <div key={index}>
    <h3>{item.title}</h3>
    <p>{item.content}</p>
  </div>
))}

注意事项 #

• key必须加在map返回的最外层元素上，不能加在内部子元素中。
• 不要用随机值当key，会导致元素每次渲染都重新创建，浪费性能。

内容的提问来源于stack exchange，提问作者shaijuelayidath