钥匙是唯一的，但仍然出现“遇到两个孩子用相同的钥匙”

Posted 2023-02-21

【中文标题】钥匙是唯一的，但仍然出现“遇到两个孩子用相同的钥匙”

【英文标题】：Key is unique but still getting "Encountered two children with the same key"

【发布时间】：2020-01-08 12:44:37

【问题描述】：

我有以下数据：

const huntersData = [
    
        id: 1,
        name: 'A',
        image: '',
    ,
    
        id: 2,
        name: 'B',
        image: '',
    ,
    
        id: 3,
        name: 'C',
        image: '',
    ,
    
        id: 4,
        name: 'D',
        image: '',
    
]

export default huntersData

以及以下组件：

import React from 'react'

export default function Hunters(props) 
    return (
        <div>
            
                props.hunters.map(hunter => (
                    <div key="hunter.id" onClick=() => props.selectHunter(hunter)>
                        <img src=hunter.image alt=hunter.name  />
                        <p>hunter.name</p>
                    </div>
                ))
            
        </div>
    )

并调用它：

<Hunters
    hunters=this.state.hunters
    selectedHunter=this.state.selectedHunter
    selectHunter=this.selectHunter
/>

但我收到以下错误： Encountered two children with the same key, hunter.id. 我什至尝试使用 index 作为键，但仍然遇到同样的错误。根据数据对象，键是唯一的，我做错了什么？

【问题讨论】：

What do curly braces mean in JSX (React)?的可能重复

【参考方案1】：

您使用了始终相同的字符串文字"hunter.id"。您需要使用实际的 id 作为键：

key=hunter.id

如果您打算使用格式字符串，正确的语法应该是：

key=`$hunter.id`

但这不是必需的，因为密钥仅由 id 本身组成。

【讨论】：

我真是太愚蠢了，谢谢！当我被允许时，我会接受这个提议。