列表中的每个孩子都应该有一个唯一的“关键”道具bulbul

Question

我在应用程序中将Bulma framework与React一起使用，我使用column is-multiline Bulmas类：

<div className="column">
   <div className="columns is-multiline"> <--- error in this line
    {this.renderPerksAndBenefits(
      props.data.defaultPerksAndBenefits,
      props.data.translatedPerksAndBenefits
    )}
  </div>
</div>

并且我得到了错误：Each child in a list should have a unique "key" prop.我使用键并在可能出现循环或其他情况时设置键值，但是如果我没有任何唯一值要使用，我不知道该在这里使用什么像键一样，我尝试使用key="columns"和类似的值，但是它不起作用，我想知道如何解决它，并且是否存在任何默认键值？UDP renderPerksAndBenefits方法：

renderPerksAndBenefits = (
    defaultPerksAndBenefits,
    translatedPerksAndBenefits
) => {
    return defaultPerksAndBenefits.nodes.map((node, index) => {
      const finalData = {
        ...node,
        ...translatedPerksAndBenefits[index],
      }
      return finalData.perksAndBenefits.map(({ icon, description, title }) => (
        <>
          <div className="column" key={icon.file.title}>
            <div className="columns is-multiline">
              <img
                className="perks-and-benefits__icon"
                src={icon.file.url}
                alt={icon.file.title}
              />
              <div className="perks-and-benefits__title">{title}</div>
              <div className="perks-and-benefits__description">
                {description}
              </div>
            </div>
          </div>
        </>
      ))
    })
  }

Answer 1

react键必须在map函数返回的最外面的元素上，以便在其同级中唯一。在编写时，每个键在兄弟姐妹中都是唯一的，但它是每个返回片段的唯一子代，这些片段没有键，因此它们也不是唯一的。将其移至Fragment或删除Fragment并将其全部返回到div中。 （Fragment并没有真正达到目的，因为其中只有一个节点