Не правильный рендер после unshift React

Question

У меня в компоненте React динамически должны добавляться элементы:

function newElem(elem) {
    elems.unshift({
        nick: "nastya",
        text: "Бумер",
        numStory: story2,
        post: post1,
        likes: 412142,
        haveStory: false
    });
    return setElems([...elems]);
}

После они рендерятся:

<div className={"posts"} id={"posts"}>
    {elems.map((elem, i) => {
      return <Post obj={elem} key={i}/>
    })}
</div>

но после добавления нового компонента свойство likes спускается в элемент массива ниже.

Пример:

компонент 1
лайки: 10
  
компонент 2
лайки: 1

После добавления нового компонента:

новый компонент
лайки: 10 (хотя должно быть 412142)

компонент 1
лайки: 1
  
компонент 2
лайки: 1

Answer 1

Вы используете в качестве key - индекс, вместо "уникального значения" и при этом делаете unshift, который каждый раз изменяет позицию всех элементов в массиве.

Для того что бы такого не происходило можно либо генерировать ключи в момент инициализации компонента с помощью утилит типа uuid или брать его прямо из объекта (при наличии, например, id):

const elems = [
  {
    id: "hsh3k4hs"
    nick: "nastya",
    // ... остальные пары
  }
] 

<div className={"posts"} id={"posts"}>
    {elems.map(elem => {
      return <Post obj={elem} key={elem.id} />
    })}
</div>

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

БЛОГ НА HUSL

Не правильный рендер после unshift React

Ответы (1 шт):