列表中的每个 child 都应该有一个唯一的 "key" prop bulma

Question

我在我的应用程序中使用 Bulma framework 和 React，我使用 column is-multiline Bulmas class :

<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

反应键需要位于 outer-most 元素 return 由 map 函数编辑，以便在其兄弟姐妹中是唯一的。正如所写，每个键 在其兄弟姐妹中是 唯一的，但它是每个 returned 片段中唯一的 child，这些片段没有键，因此它们不是独一无二。将其移至 Fragment 或将 Fragment 和 return 全部删除 div。（Fragment 并没有真正发挥作用，因为其中只有一个节点）

return finalData.perksAndBenefits.map(({ icon, description, title }) => (
  <Fragment key={icon.file.title}>
    <div className="column" >
      <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>
  </Fragment>
))

或

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>
))

列表中的每个 child 都应该有一个唯一的 "key" prop bulma

Each child in a list should have a unique "key" prop bulma

reactjs

bulma