Реакция: Как назначить ключ на основе счетчика состояний и приращения счетчика состояний в отображении?

Question

Я создаю приложение реагирования, которое отображает список элементов (имя компонента - «el»).Мне бы хотелось, чтобы каждый элемент содержал уникальный ключ, который представляет собой просто счетчик (здесь он называется «ранг»), который приложение увеличивает для каждого элемента.В настоящее время я успешно назначаю ранг в качестве ключа в отображении, но я не знаю, как сделать, чтобы увеличить его, чтобы он был уникальным для каждого.Это возможно?Должен ли я использовать какой-то цикл for вместо map ()?

class App extends Component {
  constructor() {
    super();
    this.state = {
      someList:[/*Some List of Elements*/],
      rank:0,
    };
  }
  render() {
    const {myList, rank} = this.state;
    return (
      <section>
        <div className="container-fluid">
          <div className="row mb-5">
            <div className="col">
              <ul className="list-group" id="list">
                {myList.map(
                  (el) => <AListElement id={el.id} text={el.text} key={rank}/>
                )}
              </ul>
            </div>
          </div>
        </div>
      </section>
  }

Answer 1

Атрибут

key предназначен для уникальной идентификации элемента.Вам не нужно поддерживать состояние, чтобы перейти к key.

.map() метод имеет index в качестве второго параметра, и вы можете передать его в качестве ключа, как Шон упомянул в своем ответе.Но, как правило, рекомендуется добавить уникальную строку в index и передать ее ключевой подпорке.

{myList.map(
  (el, i) => <AListElement id={el.id} text={el.text} key={`el_${el.id}_${i}`}/>
)}

Почему важно не использовать просто index в качестве ключевой подпорки *Ключ 1012 *

- единственное, что React использует для идентификации элементов DOM.Что произойдет, если вы добавите элемент в список или удалите что-то посередине?Если ключ такой же, как и раньше, React предполагает, что элемент DOM представляет тот же компонент, что и раньше.Но это уже не так.

Вот подробный обзор с примером.

Индекс в качестве ключа является анти-паттерном

Answer 2

Функция map() поставляется с уникальным параметром счетчика индекса для каждого элемента:

{myList.map(
  (el, index) => <AListElement id={el.id} text={el.text} key={index}/>
)}