ReactJS key для child-элементов

287
07 декабря 2017, 02:18

Стоит задача вывести элементы из JSON, которые будут изменяться пользователем. Проблема появляется при выводе массива:

let items = this.props.doc.map(function(item, index) {
      <item key={index} data={item} onChange={this.onChange} />
}
return {items}

Приведу пример JSON (выводим элементы из group):

{
"just": "example",
"too": "example",
"group": [
    {
        "name": "",
        "type": "Model"
    },
    {
        "name": "",
        "type": "Model"
    }
  ]
}

Проблема заключается в том, что при удалении элемента из state родителя в котором хранится JSON, key у child'ов меняется т.к. это индекс массива, а React пытается рендерить думая, что ключи не изменились (визуально удаляет не тот элемент, хотя в state все правильно).

У элементов изначально нет ничего уникального, что можно было бы использовать за key.

Как выйти из этой ситуации?

Если использовать совершенно рандомный ключ (например Math.random(), хоть и так нельзя ), то React перерендеривает целиком каждый раз, но удаление работает корректно.

P.S. JSON каждый раз разный и что-то добавлять от себя в него нельзя

Answer 1

Это происходит из-за того, что у вас key - это номер элемента в массиве. Делать так - не самая лучшая практика. Используйте уникальные данные для key. В вашем случае, это может выглядеть так:

let items = this.props.doc.map(function(item, index) {
      <item key={item.name + item.type} data={item} onChange={this.onChange} />
}

П.С. это при условии, что name и type - уникальное сочетание для вашего айтема, что скорее всего так и есть.

Answer 2

Нужно в сам JSON добавить каждому объекту ключ:значение, по типу "id": "1" и использовать для ключа

READ ALSO
jQuery preloader

jQuery preloader

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

412
Как пересоздать коллекцию объектов

Как пересоздать коллекцию объектов

В общем тут пример https://codepenio/korolariya/pen/ZaMwwo?editors=0011

284
Function Declaration объявленная в цикле JS

Function Declaration объявленная в цикле JS

Здравствуйте,помогите разобраться почему Function Declaration объявленная в цикле,создается на каждой итерации

316
JS как вызвать функцию из массива?

JS как вызвать функцию из массива?

Добрый день, у меня есть глобальный массив callbacks, внутри него хранится функция, которую мне надо исполнить внутри событияon("click")

320