React数组map条件渲染时唯一key属性报错问题咨询

问题原因 #

React 要求数组遍历（map）返回的直接根节点必须绑定唯一key属性，你当前的写法里key绑定位置不符合要求：

• 非最后一项的返回根节点是<span>，你给这个根节点加key是有效的
• 最后一项的返回根节点是<> </>（React Fragment 语法糖），你把key绑定在了 Fragment 内部的<span>上，相当于遍历返回的根节点没有key，因此会触发警告。

另外你最后一项外层的 Fragment 是冗余的，内部只有一个<span>元素，不需要额外嵌套 Fragment。

解决方法 #

推荐你优化代码结构，把条件判断移到<span>内部，外层统一绑定key，代码更简洁也不会触发警告：

{items.map((item, index) => (
  <span key={index}>
    {index !== items.length - 1 ? (
      <Link to={`/${item.path}`} exact>
        {item.title}
      </Link>
    ) : (
      item.title
    )}
  </span>
))}

如果你要保留原来的分支写法，需要给最后一项的 Fragment 绑定key，注意短语法<></>不支持添加属性，要写完整的<React.Fragment>标签：

{items.map((item, index) =>
  index !== items.length - 1 ? (
    <span key={index}>
      <Link to={`/${item.path}`} exact>
        {item.title}
      </Link>
    </span>
  ) : (
    <React.Fragment key={index}>
      <span>
        {item.title}
      </span>
    </React.Fragment>
  )
)}

额外提示：如果item本身有唯一固定的id类属性，优先用item.id作为key的值，比用下标index更稳定，能避免列表增删时出现异常渲染问题。

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