0

Estou com um problema ao tentar remover um elemento específico do AsyncStorage, sempre está sendo removido o primeiro elemento.

Adicionando elemento:

  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);
      }
    }
  }

Carregando os elementos:

  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);
    }
  }

Removendo o elemento:

 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);
}}
13
  • Qual o valor de index? Onde voce usa a funcao handleDelete, qual valor passado pra ela? Esta removendo o item anterior ao que voce deseja remover? Nao da pra entender o erro sem maiores detalhes, mas pode ser por causa do valor de index. Commented 8/12/2020 às 0:23
  • Meu caro, estou chamando a função através da FlatList, criei um botao (<TouchableOpacity onPress={() => handleDelete(item)}>) que chama a funcao. Pois é mando excluir um item da lista, mas remove o anterior. Commented 8/12/2020 às 0:34
  • Nao sei se faz a diferença, mas quando adiciona itens, o array é salvo da seguinte maneira: [{"id":15321,"produto":"arroz","quantidade":2,"valor":"3,00","valorTotal":"6,00"},{"id":16715,"produto":"feijao","quantidade":2,"valor":"1,00","valorTotal":"2,00"},{"id":39909,"produto":"macarrao","quantidade":3,"valor":"2,00","valorTotal":"6,00"}] Commented 8/12/2020 às 0:41
  • Adicionei primeiro o arroz, depois o feijão e por último o macarrão. Quando mando excluir o feijão, é removido o arroz. Commented 8/12/2020 às 0:43
  • 1
    Entendi, entao o valor de index seria entao, por exemplo, este objeto {"id":16846,"produto":"arroz","quantidade":1,"valor":"2,00","valorTotal":"NaN"}? Porque se for, vai dar erro mesmo, pois index tem que ser um numero. Commented 8/12/2020 às 0:50

1 Resposta 1

3

Conforme já foi dito nos comentários, o problema é que o splice deve receber o índice do elemento (sua posição no array), não o elemento em si. Quando você passa um índice inválido, o splice começará do início do array, e por isso o primeiro elemento é removido. Por exemplo:

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

Caso você saiba qual elemento remover, mas não saiba o índice dele, pode usar uma das seguintes funções:

  • indexOf para valores primitivos primitivos

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

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' }];


Uma outra opção é fazer uso do filter, como dito nos comentários, que irá te retornar um novo array. Note que aqui além de um novo array ser criado, o array original não é modificado e o filter obrigatoriamente percorrerá todos os elementos do array.

O novo array conterá todos os elementos que passam como true pela condição do 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' }];


Seu código também possui outros problemas, por exemplo;

  • No handleDelete você não pega a lista do estado, mas sim no AsyncStorage novamente.
  • No handleDelete você chama getItems que busca a lista atualizada no AsyncStorage ao invés de simplesmente atualizar os estados (você já sabe o que mudou).
  • No handleDelete você chama de index e trabalha esperando receber um índice, mas chama a função passando um item do array, não o índice dele.
  • No getItems está utilizando dois .reduce no mesmo array. Poderia utilizar apenas um que retornasse um objeto com os valores desejados, assim percorrendo o array uma única vez.
8
  • Obrigado Rafael, me ajudou bastante, vou rever isto tudo que vc disse. Eu chamo a função getItems foi com a ideia de rerenderizar os items pois depois que excluia o valor total da lista e total da quantidade e não atualizava o estado, desta maneira achei melhor, que assim estaria forçando a atualização e rerenderiza os valores. Commented 10/12/2020 às 13:03
  • Você pode colocar a lógica de atualizar o estado e os totais em uma função separada que recebe a lista. Assim você chama essa função tanto dentro do getItems quanto dentro do handleDelete e não precisa ler do AsyncStorage novamente. Commented 10/12/2020 às 13:08
  • Melhor explicando: Eu chamo a função getItems, pq depois que eu exclui, não estava atualizando os estados de "valor total da lista" e também a "quantidade de items", então desta maneira achei melhor, pois assim estaria forçando a atualização e rerenderizaria estes valores. Commented 10/12/2020 às 13:11
  • Entendi!!!! Vou conferir esta sua ideia também, vlw!!! Commented 10/12/2020 às 13:17
  • 1
    Consegui Rafael, obrigado pelo apoio! Fiz isto: const lista = JSON.parse(await AsyncStorage.getItem('items')); const novaLista = lista.filter((produto) => produto.id !== item.id); await AsyncStorage.setItem('items', JSON.stringify(novaLista)); ---- Agora vou refatorar, corrigir nomes de funções e alterar variáveis. Commented 11/12/2020 às 19:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .