javascript - 我收到错误列表中的每个 child 都应该有一个唯一的 "key" Prop

Question

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

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

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

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

Answer 1

将 key 添加到片段，而不是个人<td>小号:

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