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

Question

i am using react and when i tried to use map function in it,i had multiple components inside map return function.so inorder to contain i used dummy parent element and started showing the error ** Each child in a list should have a unique " key” prop**。我不知道如何在虚拟父 <> 中包含 key。你能帮帮我吗？

                           {
                             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>
    );
  })
}