React开发警告：数组子元素需唯一key属性，添加后仍报错求助

问题出在你把key属性加在了<ToDoItem>组件上，但实际上map函数返回的每个数组元素是Fragment（<>），React要求数组的直接子元素必须拥有唯一key，而不是Fragment内部的组件。

短语法的<>不支持添加key属性，所以你需要改用完整的<React.Fragment>标签，并把key绑定在它上面：

return (
  <div className='container' style={todoStyle}>
    <h3 className='my-3'>ToDos List</h3>
    {props.todos.length === 0 ?
      "No ToDos to display" :
      props.todos.map((todo) => {
        return (
          <React.Fragment key={todo.sno}>
            <ToDoItem todo={todo} onDelete={props.onDelete} /> <hr />
          </React.Fragment>
        )
      })
    }
  </div>
)

原因很直接：当你用Fragment包裹多个元素作为map的返回值时，这个Fragment就是数组中的直接子节点，React需要通过key来追踪每个节点的变化。之前的写法里，Fragment没有key，即便内部组件加了key，React依然会判定数组子元素缺少唯一标识，所以警告不会消失。

内容的提问来源于stack exchange，提问作者Div