警告：列表中的每个孩子都应该有一个唯一的“关键”道具 - 已经分配了关键答案

【问题标题】：Warning: Each child in a list should have a unique "key" prop - already assigned key警告：列表中的每个孩子都应该有一个唯一的“关键”道具 - 已经分配了关键
【发布时间】：2022-01-07 19:35:21
【问题描述】：

我收到此错误：

Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at Easy
    at div
    at Central
    at div
    at Main
    at App

我写了以下代码。


import React from 'react'
import Riddlees_comp from './riddlees_comp'


function Easy() {


const riddles_ = [{
   id:1,
   state_:[],
},
   {
   id:2,
   state_: false,
   }]

   return (
       riddles_.map(function(x){
           return <Riddlees_comp key={riddles_.id} riddles_ = {x} />
       })
   )
}

export default Easy

即使我已经为该功能分配了一个键，我也会收到此错误。我究竟做错了什么？非常感谢。

【问题讨论】：

标签： reactjs object error-handling key

【解决方案1】：

key={x.id} 而不是 key={riddles_.id}

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

应该是

<Riddlees_comp key={x.id} riddles_ = {x} />

将 key={riddles_.id} 更改为 key={x.id}

【讨论】：

【解决方案3】：

您正在为每个 Riddles_comp 分配相同的密钥

<Riddles_comp key={x.id} />

【讨论】：

【解决方案4】：

为保证键的唯一性，如果您不打算再次在组件中重用key 变量，最好使用索引标识符。流行的做法是：

riddles_.map(function(x,index){
    return <Riddlees_comp key={index} riddles_ = {x} />
})

【讨论】：