React 警告我 key prop 必须是唯一的，但我提供了一个唯一的答案

【问题标题】：React is warning me key prop must be unique yet I have provided a unique oneReact 警告我 key prop 必须是唯一的，但我提供了一个唯一的
【发布时间】：2021-11-15 22:53:16
【问题描述】：

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

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

                <label htmlFor={`${type}-${value.toLowerCase()}`}>
                  {value}
                </label>
              </>
            ))}
</div>
</form>

我使用 uuidv4 作为输入字段的唯一键，我什至通过将数组索引作为唯一道具传递来进行检查，但我通过反应得到了相同的警告。 StackOverflow 上的一个类似问题建议使用最外层 JSX 标记上的键，所以我将键放在 <React.Fragment key={uuid()}> 中，但我再次收到相同的错误（警告：列表中的每个孩子都应该有一个唯一的“键”道具.)

【问题讨论】：

可能是因为每当渲染组件时，给定项目的键都会发生变化。见stackoverflow.com/a/43892905/535480
键必须在最外层的元素上。为此，您必须使用长格式 Fragment 标记。一旦你移动它，请不要使用渲染时生成的 uuid 作为键！！ - 这完全违背了 React 中键的目的。你最好忽略它并留下警告。 同样，使用这样的 uuid 是一种非常糟糕的做法。
将 uuid 作为密钥传递并不是一个好习惯。在每次渲染时，它的键可能会发生变化，因此 react 会将其视为一个新组件。它从 DOM 中删除旧组件并再次添加相同的组件。如果它是固定的，你可以使用 key 作为一些硬编码的值。如果它是动态的或在某个循环内。然后尝试为每个孩子保留一些 id 或索引

标签： javascript reactjs jsx

【解决方案1】：

映射后设置div中的所有子元素

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

【讨论】：

【解决方案2】：

您尚未将密钥分配给Fragments

 {["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY"].map((value) => (
                  <Fragment key={value}> // ADD KEY HERE
                    <input/>
                    <label></label>
                  </Fragment>
                ))}

确保对所有片段都执行此操作。

【讨论】：

【解决方案3】：

问题是 React 片段标签 >。修改为的简写片段，带有 key 属性（分配唯一值）。问题将得到解决。

import { v4 as uuidv4 } from "uuid";
<form>
<div className="first-row-days">
                {["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY"].map((value, index) => (
                  <React.Fragment key={"iterate-1-" + index}>
                    <input
                      type="checkbox"
                      value={value}
                      key={"first-row-days-" + index}
                      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, index) => (
               <React.Fragment key={"iterate-2-" + index}>
                <input
                  type="checkbox"
                  value={value}
                  key={"second-row-days-" + index}
                  id={`${type}-${value.toLowerCase()}`}
                  onChange={(e) => setStoreDays(e)}
                />

                <label htmlFor={`${type}-${value.toLowerCase()}`}>
                  {value}
                </label>
              </React.Fragment>
            ))}
</div>
</form>

【讨论】：

key={uuidv4()}。这不是一个好习惯。它违反了所有 react 虚拟 dom 的特性和优势。
谢谢。已修改。

【解决方案4】：

您可以尝试在您的案例中使用 value 作为 key 并添加 <React.Fragment>。

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

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

【讨论】：