我收到错误列表中的每个孩子都应该有一个唯一的“关键”道具

Question

我正在使用反应，当我尝试在其中使用映射函数时，我在映射返回函数中有多个组件。所以为了包含我使用了虚拟父元素并开始显示错误**列表中的每个子元素都应该有一个独特的“关键”道具**。我不知道如何在虚拟父级中包含关键。你能帮我吗。

                           {
                             dataArray.map((item,key)=>{
                                return(
                                     <>

                                    <td key={key}>{item.country}</td>
                                     <td key={key}>{item.city}</td>
                                    </> 
                                )})
                            }

通过添加虚拟父级，我得到了该错误唯一键。有什么方法可以删除唯一键错误，将两个 td 保留在 return 语句中

Answer 1

将密钥添加到片段，而不是个人<td>s：

{
  dataArray.map((item, key) => {
    return (
      <React.Fragment key={key}>
        <td>{item.country}</td>
        <td>{item.city}</td>
      </React.Fragment>
    );
  })
}