单选按钮列表给出警告：列表中的每个孩子都应该有一个唯一的“键”属性

Question

虽然带有单选按钮的表单按预期工作（检查选定的选项并显示相应的组件），但我一直得到唯一的关键道具警告。
我使用一个对象数组将数据馈送到渲染函数并返回无线电输入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

感谢您的时间和投入：）

Answer 1

你能试试这个吗：

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

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

让我知道它是否有效。

Answer 2

您在错误的元素中添加了“键”。应将其添加到“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>
  )
}