Javascript 密钥是唯一的，但仍将获得“遇到两个具有相同密钥的子项”

我有以下数据：

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} height="90" />
                        <p>{hunter.name}</p>
                    </div>
                ))
            }
        </div>
    )
}

并称之为：

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

但我得到了以下错误： 遇到两个具有相同密钥的子项{hunter.id}。我甚至尝试使用索引作为键，但仍然得到相同的错误。根据数据对象，键是唯一的，我做错了什么？

您使用的字符串文字{hunter.id}总是相同的。您需要使用实际id作为密钥：

key={hunter.id}

如果要使用格式字符串，正确的语法为：

key={`${hunter.id}`}

但是这里不需要这样做，因为键只是由id本身组成。

您使用的字符串文字{hunter.id}总是相同的。您需要使用实际id作为密钥：

key={hunter.id}

如果要使用格式字符串，正确的语法为：

key={`${hunter.id}`}

---

但是这里不需要这个，因为密钥只是由id本身组成。

我太傻了，谢谢！如果允许的话，我会接受的。我真是太蠢了，谢谢！如果可能的话，我会接受重复的报价