React静态数组渲染元素时，如何消除唯一key属性警告？

你之前的写法之所以没消除警告，核心原因是：React要求map循环生成的每一个顶层元素必须有唯一key——你给内部的span加key没用，真正需要加key的是map返回的那个<>（Fragment）。下面给你几个简单可行的解决办法：

方法1：给完整Fragment加key #

简写的<>不支持添加key，换成完整的<React.Fragment>即可。因为你说元素是静态的、不会被移动或删除，用index作为key完全安全：

const renderedText = () => {
  return text.map((e, index) =>
    <React.Fragment key={index}>
      <span className={`text-${e.player}`}>{e.text} </span>
      <span className={`snippet-${e.player}`}>{e.snippet} </span>
    </React.Fragment>
  )
}

方法2：用容器元素包裹并加key #

如果不介意多一层DOM元素，可以用一个span或div把两个span包起来，给容器加key。这个写法更简洁，只要容器不影响样式和布局就非常实用：

const renderedText = () => {
  return text.map((e, index) =>
    <span key={index}>
      <span className={`text-${e.player}`}>{e.text} </span>
      <span className={`snippet-${e.player}`}>{e.snippet} </span>
    </span>
  )
}

方法3：用数据的唯一标识当key（最优方案） #

如果你的text数组里的每个对象自带唯一属性（比如id），优先用这个属性当key，比index更稳妥——哪怕以后数据有变动，也不会出现渲染异常：

const renderedText = () => {
  return text.map(e =>
    <React.Fragment key={e.id}>
      <span className={`text-${e.player}`}>{e.text} </span>
      <span className={`snippet-${e.player}`}>{e.snippet} </span>
    </React.Fragment>
  )
}

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