У каждого ребенка в списке должна быть уникальная «ключевая» опора булмы - PullRequest
Новая
       12

У каждого ребенка в списке должна быть уникальная «ключевая» опора булмы

0 голосов
/ 26 марта 2020

Я использую 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. Я использую ключи и установить значения ключа, когда это возможно в циклах или т. д. c, но я не знаю, что я могу использовать здесь, если у меня нет уникального значения для использования в качестве ключа, я попытался использовать 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>
        </>
      ))
    })
  }

1 Ответ

1 голос
/ 26 марта 2020

Ключ реакции должен находиться на самом внешнем элементе, возвращаемом функцией карты, чтобы быть уникальным среди своих братьев и сестер. Как написано, каждый ключ является уникальным среди своих братьев и сестер, но это единственный дочерний элемент каждого возвращенного фрагмента, у фрагментов нет ключей, поэтому они не уникальны. Либо переместите его на Fragment, либо удалите Fragment и верните все в 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>
))
...