Понимание использования ключей в React - PullRequest
Новая
       8

Понимание использования ключей в React

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

У меня есть простой пример рендеринга списка в React: 

  render() {
    return (
      <ul>
        {this.state.cards.map(({ data }, index) => (
          <li key={index} onClick={() => this.remove(index)}>
            {data}
          </li>
        ))}
      </ul>
    );
  }

  remove = index => {
    let cards = this.state.cards.filter((card, i) => i != index);
    this.setState({ cards });
  };

Здесь я использую index в качестве ключа, и есть кое-что, чего я не понимаю, даже после поиска ключей в Реагируйте в Google и читайте руководство:

Функция удалить изменяет индексы, которые, в свою очередь, изменяют ключи некоторых элементов в списке (поэтому, если я убрал номер 2, все ключи элементы после его изменения).

Так что я бы на самом деле ожидал, что эта функция всегда удалит последний элемент в списке, поскольку каждый раз удаляется только этот ключ, но это удивительно или нет работает так, как «должен», и каждый раз удаляет нужный элемент - когда я смотрю на консоль React в Chrome, я вижу, что она меняет ключи, но не удаляет и не создает заново те элементы, для которых их ключи были изменены ...

Я очень озадачен тем, что здесь происходит ((⇀‸↼))

...