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

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 作为键。在您的代码中，您将 operationsListKey 作为第二个参数传递，这是一个函数本身，它在每次 map 函数迭代时返回每个操作的 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>
  )
}

如果'input'需要key，你可以像下面这样传递另一个

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>
  )
}