Как удалить элемент из массива стейт в React Js

Question

Как удалить элемент из массива стейт в React Js

Рейтинг: 0Ответов: 1Опубликовано: 26.08.2023

У меня есть функция добавление элемента в массив:

function addOrders(item) {
    let isArray = true;

    songOrders.forEach(el => {
      if(el.id === item.id) {
        return isArray = false;
      }
    })

    if(isArray) {
      setSongOrders([...songOrders, item]);
    }

По аналогии надо написать функцию по удалению элемента из массива.

Пробовал с помощью функции filter:

if(isArray) setSongOrders([...songOrders.filter(el => el !== item)]);

Но тогда при нажатие можно удалить только первый элемент, остальные же нельзя

javascript reactjs

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

В самом начале описан тип. Не особо важно, просто для наглядности.

Две функции для добавления и удаления.

Также рекомендую почитать про Array.filter и Array.findIndex

type OrderType = {
  id: string
} 

const [orders, setOrders] = useState<OrderType[]>([])

const addOrder = (order:OrderType) => {
  setOrders((ords) => {
    const clone = [...ords]
    const existIdx = clone.findIndex(({id}) => id === order.id)
    if(existIdx !== -1){
      clone[existIdx] = order
      return clone
    }
    
    return [...clone, order]
  })  
}

const removeOrder = (order:OrderType) => {
  setOrders((ords) => {
    return  ords.filter(({id}) => id !== order.id)
  })
}

Как удалить элемент из массива стейт в React Js

Ответы