为什么此代码会出现 "Each child in a list should have a unique 'key' prop" 错误？

Question

如果我用 div 替换片段 (<> ) 并给它一个键，我就不会再收到错误，但这也会搞砸我的按钮组。这些元素中的每一个都有一个唯一的键，片段不应该是 dom 元素，所以为什么会出现这个错误？对解决方案有什么建议吗？

{["long", "short", "out", "none"].map(stance =>
           <>
               <input type="radio" className="btn-check" id={stance} key={stance}
               autoComplete="off" checked={options.stance === stance} disabled={options.auto}/>
               <label key={`${stance}label`} className="btn btn-outline-primary btn-sm" htmlFor={stance}>{stance}</label>
           </>
)}

为了解决这个问题，我认为 quickest/easiest 解决方案如下：

{["long", "short", "out", "none"].map(stance =>
           <React.Fragment key={stance}>
               <input type="radio" className="btn-check" id={stance} 
               autoComplete="off" checked={options.stance === stance} disabled={options.auto}/>
               <label className="btn btn-outline-primary btn-sm" htmlFor={stance}>{stance}</label>
           <React.Fragment/>
)}

Answer 1

从 React 文档中尝试这个：

https://reactjs.org/docs/fragments.html#keyed-fragments

<React.Fragment key={your key}>
    {your code}
</React.Fragment>

Answer 2

如果您不想使用 div，只需制作一个可以映射的组件，并且仍然保持 jsx 不变。

function MyInput({stance}){
   return(
     <>
    <input type="radio" className="btn-check" id={stance} 
               autoComplete="off" checked={options.stance === stance} disabled={options.auto}/>
               <label className="btn btn-outline-primary btn-sm" htmlFor={stance}>{stance}</label>
    </> 
  )
}

然后你的地图你可以这样做。

{["long", "short", "out", "none"].map((stance, i) =>
          <MyInput stance={stance} key={i}/>
)}

Answer 3

 {["long", "short", "out", "none"].map((stance,index) =>
       <>
           <input type="radio" className="btn-check" id={stance} key={index}
           autoComplete="off" checked={options.stance === stance} disabled={options.auto}/>
           <label key={`${stance}label`} className="btn btn-outline-primary btn-sm" htmlFor={stance}>{stance}</label>
       </>

)}

在key中使用index而不是stance，索引将来自map(stance,index)

为什么此代码会出现 "Each child in a list should have a unique 'key' prop" 错误？

Why does this code give an "Each child in a list should have a unique 'key' prop" error?

jsx

reactjs