Error with . splice, is removing the first element and not specified

Question

I have a problem trying to remove a specific element from AsyncStorage, is always being removed first element.

Adding element:

  async function adicionar() {
    if (produto === '') {
      alert('Informe um item antes de prosseguir!');
      return;
    }
    if (valor === '' || valor === null) {
      setValor(0);
    } else {
      try {
        let lista = {
          id: Math.floor(Math.random() * 65536),
          produto,
          quantidade: parseInt(quantidade),
          valor: parseFloat(valor).toFixed(2).replace('.', ','),
          valorTotal: parseFloat(quantidade * valor)
            .toFixed(2)
            .replace('.', ','),
        };

        const data = (await AsyncStorage.getItem('items')) || '[]';
        let items = JSON.parse(data);
        //let items = [];
        items.push(lista);

        await AsyncStorage.setItem('items', JSON.stringify(items)).then(() => {
          setProduto('');
          setQuantidade('');
          setValor('');
          console.log(items);
        });
      } catch (error) {
        console.log(error);
      }
    }
  }

Loading the elements:

  async function getItems() {
    try {
      const lista = await AsyncStorage.getItem('items');
      const data = JSON.parse(lista);

      let total = data.reduce(
        (acc, objeto) => acc + parseFloat(objeto.valorTotal),
        0,
      );
      let totalQtd = data.reduce(
        (acc, objeto) => acc + parseFloat(objeto.quantidade),
        0,
      );
      setTotal(total);
      setTotalQtd(totalQtd);
      setData(data);
      console.log(lista);
    } catch (error) {
      console.log(error);
    }
  }

Removing the element:

 async function handleDelete(index) {
    try {

      const lista = await AsyncStorage.getItem('items');
      const data = JSON.parse(lista);

      data.splice(index, 1);
      await AsyncStorage.setItem('items', JSON.stringify(data));
     
     getItems();
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  }

---

 async function deleteItem(item) {
 try {
  var index = data.filter((item) => item.id !== id);

  console.log('produto: ' + item.produto); // retorna o nome do produto referente ao id, por exemplo macarrão, ou seja o filter está funcionando.
  
  data.splice(index, 1); // mas ainda está removendo o primeiro item da lista

  AsyncStorage.setItem('items', JSON.stringify(data));
} catch (error) {
  console.log('error: ', error);
}}

Answer 1

As has already been said in the comments, the problem is that the splice should receive the element index (its position in the array), not the element itself. When you pass an invalid index, the splice will start from the beginning of the array, and so the first element is removed. For example:

const arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice('c', 1);
console.log(arr); // ['b', 'c', 'd', 'e'];

If you know which element to remove, but don’t know its content, you can use one of the following functions:

• indexOf for primitive primitive values

const arr = ['a', 'b', 'c', 'd', 'e'];
const indexC = arr.indexOf('c');
arr.splice(indexC, 1);
console.log(arr); // ['a', 'b', 'd', 'e'];

• findIndex for objects

const arr = [{ letra: 'a' }, { letra: 'b' }, { letra: 'c' }, { letra: 'd' }];
const indexC = arr.findIndex(objeto => objeto.letra === 'c');
arr.splice(indexC, 1);
console.log(arr); // [[{ letra: 'a' }, { letra: 'b' }, { letra: 'd' }];

---

Another option is to make use of filter, as stated in the comments, it will return you a new array. Note that here in addition to a new array being created, the original array is not modified and the filter must go through all elements of the array.

The new array will contain all the elements you pass as true by the condition of filter:

const arr = [{ letra: 'a' }, { letra: 'b' }, { letra: 'c' }, { letra: 'd' }];
const resultado = arr.filter(objeto => objeto.letra !== 'c');
console.log(resultado); // [[{ letra: 'a' }, { letra: 'b' }, { letra: 'd' }];

---

Your code also has other problems, for example;

• In the handleDelete you don’t get the list of the state, but on AsyncStorage again.
• In the handleDelete you call getItems searching for the updated list on AsyncStorage instead of simply updating the states (you already know what has changed).
• In the handleDelete you call it index and works hoping to receive an index, but calls the function by passing an array item, not its index.
• In the getItems is using two .reduce in the same array. It could use only one that returns an object with the desired values, thus traversing the array only once.