Стоит задача вывести элементы из 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 каждый раз разный и что-то добавлять от себя в него нельзя
Это происходит из-за того, что у вас key - это номер элемента в массиве. Делать так - не самая лучшая практика. Используйте уникальные данные для key. В вашем случае, это может выглядеть так:
let items = this.props.doc.map(function(item, index) {
<item key={item.name + item.type} data={item} onChange={this.onChange} />
}
П.С. это при условии, что name и type - уникальное сочетание для вашего айтема, что скорее всего так и есть.
Нужно в сам JSON добавить каждому объекту ключ:значение, по типу "id": "1" и использовать для ключа
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости