Usestate не обновляется сразу ⇐ Javascript

[Anonymous]

Я пытаюсь удалить блок из списка блоков, а затем обновить идентификаторы блоков списка с помощью индексов

Код: Выделить всё

    function handleKeyDown(e, id) {
if (e.code === 'Backspace') {
let blocksCopy = [...blocks];
blocksCopy = blocksCopy.filter((block) => block.id != id)
blocksCopy = blocksCopy.map((block, index) => ({ ...block, id: index + 1 }));
setBlocks(blocksCopy)
}
}

когда я нажимаю кнопку «Backspace», последний блок моих элементов удаляется, и когда я записываю в консоль последнее значение блоков, он показывает список без удаленного элемента (это то, что я хочу) и с правильными идентификаторами (это то, что я хочу)
пример:

• начальное значение блоков

blocks = [ { id: 1, text: 'text'}, { id: 2, text: 'text'}, { id: 3, text: 'text'}, { id: 4, text: 'text'} ]

• блокируется после удаления третьего блока

blocks = [ { id: 1, text: 'text'}, { id: 2, text: 'text'}, { id: 4, text: 'text'} ]

• блокируется после переиндексации (обновление значений идентификатора)

blocks = [ { id: 1, text: 'text'}, { id: 2, text: 'text'}, { id: 3, text: 'text'} ]
Но на странице отображается следующее:




и когда я удаляю 3-й блок, он отображает это (вместо этого удаляется 4-й блок)



!!! обратите внимание, что такое поведение происходит только тогда, когда я пытаюсь переиндексировать блоки
с помощью этой строки:
blocksCopy =blocksCopy.map((block, index) => ({ ...block, id: index + 1 }));
OR
blocksCopy.map((block, index) => ({ ...block, id: index + 1 })); (еще один вариант той же строки)

Подробнее здесь: https://stackoverflow.com/questions/798 ... immidiatly