{todos.map( todo => {
return {
< key={todo.todo_id}>
.......
{todos.map( todo => {
return {
<div key={todo.todo_id}>
.......
您的地图中的每个元素都应该有一个唯一的键... 简单地说,您的元素 <>....</> 没有一个键属性... 而应该使用 React Fragment,例如: <React.Fragment key={todo.todo_id}/>...</React.Fragment>
这样每个元素 (React Fragment) 都有一个唯一的键 (确保 todo_id 是一个唯一的键)。当然,您可以使用 div,但如果您不想渲染一个 div,请使用 React Fragment。
简述:
在map的回调函数中,你需要为最外层的jsx元素添加一个key。在你的情况下,这将是Fragment(<>)。这里是文档中带有一些示例的部分。
解释:
那么为什么React要我添加key呢?
React更喜欢为每个元素分配唯一的key,以便它可以跟踪哪些特定元素需要在下一次渲染中更新。这些键可以帮助精确地缩小需要更新的DOM部分范围。这是React的一个很棒的部分,它不会在每次重新渲染时重建整个DOM树,只会重建改变了的部分!
那么如果我不添加key会发生什么?
React将不知道需要更新的特定元素,被迫更新比它实际需要更新的更多的内容。