React hooks单选按钮列表发出警告：列表中的每个孩子都应该有一个唯一的“键”道具

如何解决React hooks单选按钮列表发出警告：列表中的每个孩子都应该有一个唯一的“键”道具

尽管带有单选按钮的表单可以正常工作（检查选中的选项并显示相应的组件），但我仍会收到唯一的按键提示警告。
我正在使用对象数组将数据提供给render函数并返回单选jsx。

代码如下： （主要形式）

import React,{useState} from 'react'

import FormOperationoptions from './FormOptions'
import UserConfig from './user-config/UserConfig'



const Form = () => {

const[operation,setoperation] = useState('')

const selectOperationOnChange = (event) =>{
  setoperation(event.target.value);
} 
 
const operationsListKey =  FormOperationoptions.map((operations)=>{
  return operations.id})


const renderAllOperations = (value,key) => {
    return(
<div>
      <input type='radio' 
      
      key={key} 
      value={value} 
      checked={value===operation? true:false}
      readOnly
      />
      <label htmlFor={value}>{value}</label><br/>
  </div>
    )
  }

const selectedOperation = () => {
  if(operation === 'userConfig'){return(<div><UserConfig /></div>)}
}

return(
  <div>
<h3>Choose operation type:</h3>
<form 
    onChange={selectOperationOnChange}
>
    {FormOperationoptions.map((operations)=>{
    return renderAllOperations(operations.selectedOption,operationsListKey);})}
</form>          
    {selectedOperation()}
  </div>
  )
}
export default Form 

（表单数据来自哪里）

const FormOptions = [
  {
    id:1,selectedOption: 'userConfig',},{
    id:2,selectedOption: 'gitIgnore',{
    id:3,selectedOption: 'localRepository',{
    id:4,selectedOption: 'remoteRepository',]

export default FormOptions

和UserConfig组件：

import React from 'react'

const UserConfig = () =>{

  return(
    <div> UserConfig component </div>
  )
}

export default UserConfig

感谢您的时间和投入：）

解决方法

您在错误的元素中添加了“键”。应该将其添加到“ div”而非“ input”上。

const renderAllOperations = (value,key) => {
  return(
    <div key={key}>
    <input type='radio'      
      value={value} 
      checked={value===operation? true:false}
      readOnly
    />
    <label htmlFor={value}>{value}</label><br/>
    </div>
  )
}

如果“输入”需要输入键，则可以像下面这样传递另一个

const renderAllOperations = (value,key) => {
  return(
    <div key={key}>
    <input type='radio'
      key={`radio_${key}`}      
      value={value} 
      checked={value===operation? true:false}
      readOnly
    />
    <label htmlFor={value}>{value}</label><br/>
    </div>
  )
}

,

您能尝试一下吗？

return(
  <div>
<h3>Choose operation type:</h3>
<form 
    onChange={selectOperationOnChange}
>
    {FormOperationOptions.map((operations)=>{
    return renderAllOperations(operations.selectedOption,operations.id);})}
</form>          
    {selectedOperation()}
  </div>
  )

这样，每个映射的操作都将id作为键。在您的代码中，您将OperationsListKey作为第二个参数传递，并且该函数本身在每次map函数迭代时都会返回每个操作的ID。

让我知道它是否有效。