React警告我關鍵道具必須是唯一的，但我已經提供了一個唯一的道具。

import { v4 as uuidv4 } from "uuid"。
<form>。
<div className="first-row-days">/span>
                {["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"/span>>
            {["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作為輸入欄位的唯一鍵，我甚至通過傳遞陣列索引作為唯一道具來檢查，但我在react中得到了同樣的警告。StackOverflow上的一個類似問題建議在最外層的JSX標簽上使用鍵，所以我把鍵放在<React.Fragment key={uuid()}>中，但我再次得到同樣的錯誤（Warning: 串列中的每個孩子都應該有一個獨特的 "key "道具。）

uj5u.com熱心網友回復：

你沒有為Fragments

 {["MONDAY"/span>, "Tuesday", "WEDNESDAY", "THURSDAY"] 。 map((value) => (
                  <Fragment key={`value`}>/span> // ADD鍵這里
                    <input/>
                    <label></label> 
                  </Fragment>
                ))}

請確保你對所有的片段都這樣做。

uj5u.com熱心網友回復：

問題在于React的片段標簽<></>。修改為簡寫片段為<React.Fragment></React.Fragment>，并加上key屬性（分配唯一的值），問題就解決了。

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

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

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

uj5u.com熱心網友回復：

映射后，在div中設定所有的子元素

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

uj5u.com熱心網友回復：

你可以嘗試在你的情況下使用值作為鍵，并添加<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>/span>
        ))}
      </div>))。

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

標籤：

上一篇：讓我的機器人在迪斯科中在線的問題

下一篇：如何使滑塊發揮其應有的功能？