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

Question

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

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

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

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

Answer 1

为片段添加一个键，而不是单个<td>s：

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