Question

我试图创建一个包含数组对象的表单。我收到错误Encountered two children with the same key, 1：$ [object Object] .。如何创建唯一键？

renderPositions() {
  const profileCandidateCollection = this.props.profileCandidate;
  const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions;

  if (careerHistoryPositions) {
    return careerHistoryPositions.map((key, position) => {
      return (
        <CareerHistoryPositionsUpdateForm
          key={key}
          company={position.company}
          title={position.title}
        />
      )
    })
  }
}

Answer 1

你几乎是对的。如果要在map中使用索引，则元素首先出现，索引变为第二个：

return careerHistoryPositions.map((position, key) => {
   return (
     <CareerHistoryPositionsUpdateForm
       key={key}
       company={position.company}
       title={position.title}
     />
   )
})

索引适用于键in React it's discouraged。相反，请使用唯一标识符：

选择密钥的最佳方法是使用唯一标识的字符串兄弟姐妹中的一个列表项。大多数情况下，你会使用你的ID 数据作为键：

因此，对于添加到careerHistoryPositions的每个项目，添加具有唯一ID的另一个键并将其用作列表键。过去，我已使用UUID包中的v4方法创建唯一ID。

在对象数组上进行映射时创建唯一键

1 个答案: