React - массив состояний, удаляющий последний элемент в массиве вместо указанного индекса - PullRequest
Новая
       1

React - массив состояний, удаляющий последний элемент в массиве вместо указанного индекса

1 голос
/ 20 июня 2020

У меня есть состояние массива, заполненное объектами, называемыми элементами: 

    const [items, setItems] = useState([{name: "", toppings: []}])

Однако, когда я пытаюсь удалить указанный индекс с помощью этой функции: 

const removeItem = (index) => {
    setItems(items.filter((item, i) => i !== index))
    areItemsCompleted()
}

Он работает, когда я печатаю элементы консоли вне функции , однако элемент не отображается должным образом. Он удаляет только последний элемент массива из jsx, но массив items имеет правильные значения. Я где-то читал, что React только поверхностно проверяет изменения состояния, поэтому он не проверяет содержимое удаляемого объекта. Однако я не уверен, почему в консоли отображается, что items имеет правильное значение, но компоненты не отображают правильные данные. (Вместо этого он отображает те же данные, за исключением последнего элемента в items).

Я пробовал несколько способов удаления элементов из моего массива, например 

const removeItem = (index) => {
    let arr = [...items]
    arr.splice(index, 1)
    setItems(arr)
    areItemsCompleted()
}

Как мне удалить элемент из моего массива, полный объектов, и отобразить правильные данные?

1 Ответ

0 голосов
/ 20 июня 2020

Трудно угадать;

Проверьте, может быть, вы потом где-то перенастраиваете пункты;

Плюс функциональная форма безопаснее: setItems(lastItems=>lastItems.filter((item, i) => i !== index))

...