У каждого дочернего элемента в списке должен быть уникальный "ключевой" реквизит

#html #css #reactjs #jsx

#HTML #css #reactjs #jsx

Вопрос:

У меня есть const определенный с несколькими функциями, которые не имеют отношения к вопросу, поэтому я просто включаю очищенный сегмент, который имеет отношение. Дайте мне знать, если я должен включить что-нибудь еще.

       return (
        <React.Fragment key={index}>
          <hr className={hrClasses} />
          <span className={spanClasses}>
            {isTrue ? 'x' : index   1}
          </span>
        </React.Fragment>
      );
    })}
  </div>
);

В браузере я вижу предупреждение:

Предупреждение: У каждого дочернего элемента в списке должен быть уникальный реквизит «ключ».

Поскольку hr элементу не нужен уникальный ключевой реквизит, как я могу обойти эту ошибку?

Я пробовал разные варианты ключей, такие как добавление key={index} к hr элементу и переименование index ключа как id для span . Я не уверен, что еще попробовать. Любые рекомендации были бы высоко оценены!

1. Обычно это происходит, когда вы создаете компоненты или элементы в цикле. Если вы используете индекс, ключи будут равны 0 .. n. Другие циклы могут создавать те же ключи, или вы могли бы совместно использовать индекс. Вы могли бы присвоить индексу префикс или суффикс, чтобы сделать его уникальным.

2. Ключи @DCTID должны быть уникальными только для братьев и сестер . Он не разделяет его с другими массивами

Ответ №1:

Вы не применяете ключ к родительскому фрагменту.

Вы можете использовать <> так же, как вы бы использовали любой другой элемент, за исключением того, что он не поддерживает ключи или атрибуты. ~ https://reactjs.org/docs/fragments.html#short-syntax

Вы используете краткий синтаксис <>, который не поддерживает ключи. Используйте:

 <React.Fragment key={index}>
      <hr className={styles.hr} />
      <span className={styles.span}>
        {isValidated ? 'x' : index   1}
      </span>
 <React.Fragment/>

1. На самом деле я пытался заключить раздел в div с ключом, и, к сожалению, предложенное вами исправление не устранило замеченную ошибку. Я ценю ваш комментарий, хотя об этом полезно знать React.Fragment !

2. Пожалуйста, опубликуйте остальную часть вашего класса или компонента.

3. Я хотел бы увидеть значение индекса. Попробуйте записать индекс и поделиться результатами.

4. Значение индекса при регистрации увеличивается на 1, как и ожидалось — «0», «1», «2»

5. Обновлен приведенный выше контекст, чтобы включить остальную часть компонента!