Как решить проблему с ключами в методе map?

Question

[Владимир Волохов]

if (data.result !== '') {
			setPopout(<ScreenSpinner size='large' />);
			data.result.map((e, index) => {
				ToDoList.push({id: e.id, name: e.name, key: {index}});
			});

			setPopout(null);
		}

я передаю уникальный ключ, но ошибка остается Warning: Encountered two children with the same key, `2`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Comments

[Владимир]

Если это реакт то
1) Зачем в map push? JavaScript учили или сразу с реакта начали ?

Since map builds a new array, using it when you aren't using the returned array is an anti-pattern; use forEach or for...of instead.

https://developer.mozilla.org/en-US/docs/Web/JavaS...
Зачем пушить если map в его нормальном виде, с ретурном компонента можно использовать сразу в рендере.
2) Стремная затея использовать в качестве ключа - индекс, это можно делать только в том случае, если вообще невозможно найти уникальное поле для объектов в массиве
3) Вы совсем не показали код, который рендерит ToDoList, ошибка то у вас не в мапе вылазит а при рендере.

Answer 1

[Денис Инешин]

У вас на странице может быть много компонентов с ключами. Если вы всегда используете только индекс для этого - повторения неизбежны. Чтобы этого избежать, делайте ключом уникальную строку. Например `todo-item-{index}` или у вас там у каждого элемента есть id - используйте его для ключа

Comments

[Владимир]

Индекс использовать конечно же плохо, но на счет повторения при наличии нескольких компонентов

Keys Must Only Be Unique Among Siblings

Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique.

https://reactjs.org/docs/lists-and-keys.html#keys

[Vladimir Lewandowski]

Ваш вариант ничем не отличается от просто передачи индекса.

[Владимир Волохов]

не помогло. ошибка все еще возникает.

Answer 2

[Alice]

Не совсем понятна механика работы твоего куска кода, но пользуйся этим гайдом