React报key prop需唯一警告，已设置uuid/索引唯一值仍报错如何解决

问题根因 #

1. key必须绑定在map方法返回的最外层根节点上，你最早将key写在内层input标签上，外层的Fragment作为列表的直接子节点没有key，因此触发警告。
2. 后续你给Fragment加key时使用uuid()实时生成值，会导致组件每次重渲染时所有列表项的key都会被替换为全新值，React无法复用现有组件，甚至可能误判key重复，属于错误的key用法。

解决方案 #

你遍历的两个数组都是静态星期字符串，每个值本身全局唯一，直接用遍历的value作为Fragment的key即可，不需要额外生成uuid。

修正后的代码如下：

import React from "react";

<form>
  <div className="first-row-days">
    {["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY"].map((value) => (
      <React.Fragment key={value}>
        <input
          type="checkbox"
          value={value}
          id={`${type}-${value.toLowerCase()}`}
          onChange={(e) => setStoreDays(e)}
        />
        <label htmlFor={`${type}-${value.toLowerCase()}`}>
          {value}
        </label>
      </React.Fragment>
    ))}
  </div>

  <div className="second-row-days">
    {["FRIDAY", "SATURDAY", "SUNDAY"].map((value) => (
      <React.Fragment key={value}>
        <input
          type="checkbox"
          value={value}
          id={`${type}-${value.toLowerCase()}`}
          onChange={(e) => setStoreDays(e)}
        />
        <label htmlFor={`${type}-${value.toLowerCase()}`}>
          {value}
        </label>
      </React.Fragment>
    ))}
  </div>
</form>

额外注意事项 #

• 不要在map回调中实时生成uuid作为key，除非你提前把uuid挂载到数组每个元素的属性上，保证重渲染时key不会变化。
• 优先用业务天然唯一值作为key，索引仅可用于完全静态、不会发生增删排序的列表。

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