Почему метод некорректно работает с добавлением уникальных ключей?

Question

[Алексей]

Создал карточку с возможностью добавления тасков. При добавлении тасков метод начинает некорректно добавлять их (дублирует их), и с каждым добавлением все больше.
Причем, если в методе renderTasks в return

return (
          <p className="task"  key={new_current_id} >{item}</p>
        )

убрать добавление элемента с индификатором key, то

return (
          <p className="task">{item}</p>
        )

то все начинает добавляться корректно (но только реакт просит, что бы у эллементов все-таки были индивидуальные ключи), но почему добавляемые c ключами элементы начинают дублироваться так и не могу понять.

Вот ссылка на codepen https://codepen.io/aleksey_000/pen/RwaojXQ?editors=1010

Answer 1

[Demian Smith]

Потому что key должен быть уникальным значением, а у вас используется одно и тоже значние для кадого элемента списка. Самый простой и примитивный способ заткнуть реакт чтоб он не ругался на отцуствие ключа, это сделать как-то так:

taskList.map(function(item, idx) {
  return (
    <p className="task" key={idx} >{item}</p>
  )
})

Но способ лучше - это организовать структуру состояния таким образом, чтоб уникальный ключ хранился в каждом элементе списка. Типа того:

taskList = [
  {id: 1, objective: 'Buy milk'},
  {id: 2, objective: 'Learn React'},
]

taskList.map(task => (<div key={task.id}>{task.objective}</div>))

Comments

[Алексей]

Разве я даю один тот же ключ? После добавления элемента я увеличиваю new_current_id на единицу, и следующий элемент уже получает новый key. Или я это сделал неправильно и присваивается все равно старый key?
Да и тем более даже если ключи повторяются, это не объясняет странного поведения с дублированием тасков, что когда добавляю третий таск - их становится 8, когда добавляю 9-ый - их уже 15 сразу (это я сейчас приблизительные цифры взял, но примерно так)

[Demian Smith]

Выведете ключ и посмотрите сами. Как-то так.

newTemplate = taskList.map(function(item) {
        return (
          <p className="task"  key={new_current_id} >{new_current_id} {item}</p>
        )
      })

[Demian Smith]

Да, new_current_id остаётся одной и той же для каждого элемента списка.

[Алексей]

Demian Smith, все, разобрался.Каждый раз при добавлении новой таск,все таски перезаписывались с новым, одинаковым ключом. Вы правы, спасибо