React警告我关键道具必须是唯一的，但我已经提供了一个唯一的

Question

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标签上使用密钥，所以我将密钥放在中




Answer 1

问题是React片段标记

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>

Answer 2

您尚未将密钥分配给片段

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

确保你对所有的碎片都这样做。

Answer 3

映射后，在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>