警告：列表中的每个 child 都应该有一个唯一的 "key" 道具 - 已经分配的键

Question

我收到这个错误：

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

即使我已经为函数分配了一个键，我还是收到了这个错误。我究竟做错了什么？非常感谢。

Answer 1

应该是

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

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

Answer 2

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

Answer 3

您正在为每个 Riddles_comp

分配相同的密钥

<Riddles_comp key={x.id} />

Answer 4

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

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

警告：列表中的每个 child 都应该有一个唯一的 "key" 道具 - 已经分配的键

Warning: Each child in a list should have a unique "key" prop - already assigned key

error-handling

key

object

reactjs