列表中的每个孩子都应该有一个唯一的“关键”道具。我做到了，但仍然看到这个错误答案

【问题标题】：Each child in a list should have a unique "key" prop. I made it, but still see this error列表中的每个孩子都应该有一个唯一的“关键”道具。我做到了，但仍然看到这个错误
【发布时间】：2022-06-15 21:11:10
【问题描述】：

我知道 key prop，所以我在 listitem 组件中做了它

const ListItem = ({item}) => {
const {result, time, id} = item;
return(
    <li key={id} className='list__item'>
        <span className='item__result'>{result} cps</span>
        <span className='item__date'>{time}</span>
        <button className='item__delete'>delete</button>
    </li>
)}

这是组件，我在哪里使用它

const Leadboard = () => {
const [data, setData] = useState([{result:'5,63', time:'08.06.2022', id:  (new Date()).toString(16)}, {result:'5,63', time:'08.06.2022', id: +(new Date() - 1)}, {result:'5,63', time:'08.06.2022', id: +(new Date() - 2)}]);

let elements=data.map(item => {
    return (
        <>
            <ListItem item={item} />
        </>
    )
});

return(
    <div className='app-leadboard'>
        <span className='app-leadboard__title'>Your's best results:</span>
        <ol className='app-leadboard__list' type='1'>
            {elements}
        </ol>
    </div>
)}

但渲染后我仍然看到“key prop”错误

我花了这么多时间在这上面，但不明白出了什么问题。所以smb，请帮忙

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您的列表有误。 <ListItem> 组件需要密钥。（并且您可以摆脱它们周围的反应片段，因为它们毫无意义）。

【讨论】：

大声笑，我花了 2 天时间。非常感谢