列表中的每个孩子都应该有一个独特的"key"道具。我做到了，但仍然看到此错误

Question

我知道键道具，所以我把它放在列表组件

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>
)}

这里是component

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，请帮助它

Answer 1

你拿错了名单。需要密钥的是<ListItem>组件。(你可以去掉它们周围的react片段，因为它们没有意义)。

Answer 2

React首先访问空括号(<> </>)，然后访问子组件中的key属性。

所以你需要

1. 使用空括号并将key属性传递给它

// Use React.Fragment 
let elements=data.map(item => { return 
(
<React.Fragment key={item.id}>
<ListItem item={item} />
</React.Fragment>
)
});

并删除子组件(ListItem)中的键

ListItem.js
<li 
/*  Remove this
key={id} 
*/
className='list__item'>

或

去掉空括号(<> </>)，直接引用子组件。

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

并将key属性留在子组件

中更多关于React Fragment的信息。React官方文档