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

У меня есть простой пример отрисовки списка в 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 });
  };

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

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

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

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

0 ответов

Другие вопросы по тегам