React отрисовка массива

Часть кода

const handleDelete = (e,index) => {
    const bufObj = {condition_data: '', operator: '', variable: ''}
    const bufData = autocompleteArrayChange
    const bufData3 = Object.assign([], arrayGridData);
    if(bufData['condition'].length === 1){
    bufData['condition'].splice(index, 1,bufObj)
    }else {
        bufData['condition'].splice(index, 1)
    }
    bufData3[cellData[0]][cellData[1]]['data']['condition'] = bufData['condition']
    setArrayGridData(bufData3);
    setAutocompleteArrayChange(bufData)
    console.log(arrayGridData)
};

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

{arrayGridData?.[cellData[0]]?.[cellData[1]]?.['data']?.['condition'].map((num,index)=>(

Так вот, в логах новый массив формируется нормально. Но в view картина странная, если я удаляю с конца элементы, то реакт данные показывает верно, однако если щелкаю удалить на 2 индексе из 3х (например), то во view удаляется как будто бы последний элемент, однако в консоли все верно. Элементы у меня находятся в driwermenu. И если я кликаю открыть-закрыть его то данные верные подтягиваются. Где может быть проблемка?


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

Автор решения: Ruslan Red

Нашел в итоге проблему. Я не указал key для div. Самое забавное что этот key в моем случае должен быть уникальным и желательно не иметь общего с index ничего. Пришлось сделать конструкцию рода key={index + 'block' + massiv.name}.

→ Ссылка