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

Question

我知道 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>
)}

但渲染后我仍然看到“关键道具”错误

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

Answer 1

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

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 官方文档