Понимание использования ключей в 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, я вижу, что она меняет ключи, но не удаляет и не создает снова те элементы, у которых были изменены их ключи...
Я очень запутался в том, что здесь происходит ((⇀‸↼))