React列表渲染报Each child in a list should have a unique "key" prop错误如何解决

• React要求列表遍历返回的直接根节点必须绑定唯一key属性。你的map方法返回的直接根节点是<></>（React Fragment短语法），仅给内层的DoItem添加key无法满足规则，因此报错仍然存在。
• 额外语法问题：DoItem组件属性前多余的const属于无效代码，需要删除。

方案1：为Fragment绑定key #

Fragment短语法不支持绑定属性，需要替换为完整的React.Fragment标签，将key绑定到这个根节点上：

import { DoItem } from '../MyComponents/DoItem'
export const ToDo = (props) => {
    return (
        <div className="container">
            <h3 className="text-center">To Do List</h3>
            {props.todos.map((todo) => { 
                return ( 
                    <React.Fragment key={todo.nos}>
                        <DoItem todo={todo} onDelete={props.onDelete} /> 
                        <hr />
                    </React.Fragment>
                    ) 
            })}
        </div>
    )
}

方案2：用普通元素包裹子节点 #

如果不需要使用Fragment的虚拟节点特性，也可以用div等实体标签包裹DoItem和hr，将key绑定到这个外层包裹元素上：

import { DoItem } from '../MyComponents/DoItem'
export const ToDo = (props) => {
    return (
        <div className="container">
            <h3 className="text-center">To Do List</h3>
            {props.todos.map((todo) => { 
                return ( 
                    <div key={todo.nos}>
                        <DoItem todo={todo} onDelete={props.onDelete} /> 
                        <hr />
                    </div>
                    ) 
            })}
        </div>
    )
}

注意：请确认todo.nos是每条todo数据的唯一标识，如果存在重复的情况，需要替换为其他唯一值（如数据id），无唯一标识的静态列表可以临时使用遍历索引key={index}作为兜底方案。

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