我收到错误 列表中的每个孩子都应该有一个独特的"key"道具

Question

我正在使用react，当我试图在其中使用映射函数时，我在映射返回函数中有多个组件。为了包含它，我使用了伪父元素，并开始显示错误**列表中的每个子元素都应该有一个唯一的"键"；prop**.我不知道如何在伪父项中包含key<gt；。你能帮我吗。

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