Remover itens de um vetor e devolver uma reenderização Instantânea dos dados

Mobile
#1

Bom estou fazendo um app para lanchonete onde eu tenho uma tela onde o cliente monta cada lanche separadamente e a cada lanche montado ele gera um objeto que é puxado para um vetor, este mesmo vetor e recuperado em uma outra tela onde eu exibo todos os lanches que o cliente pediu, porém ao pensar que o cliente poderia querer remover um lanche e não o pedido inteiro, resolvi fazer uma function para remover esse iten do vetor, porém sempre que eu removo o item eu ainda consigo observar sua reenderização, a menos que eu saia da tela e volte para ela, lembrando a minha função de remover eu removo o item tanto do vetor desta tela quanto do vetor da outra function que é responsável por capturar os objetos. Este é o código.

import React, { useContext } from 'react';

import { View, Text, Button, TouchableOpacity } from 'react-native';

import { AuthContext } from '../../context/auth';

import Icon from 'react-native-vector-icons/Ionicons'

import styles from './styles.js';

export default function Wallet() {

    

    let vetor = [];

    let saldoFinal = [];

    let i = 0;

    const { Pedidos, removeItem, teste } = useContext(AuthContext);

    Pedidos.map(pedidos => {vetor.push(pedidos)});

    function handleRemove(item){

        vetor.map(pedidos => {

           if(item === pedidos){

            removeItem(item);

            vetor.pop(item);

            alert("Sucess");

           }

        });

    }

    return (

        <View style={styles.background}>

            <View style={styles.conteudo}>

                <Text style={styles.textSeuPedido}>Seu pedido!</Text>

            </View>

            {/* <Button title="Clipa" onPress={() => console.log(vetor)} /> */}

            <View style={styles.pedidos}>

                {vetor.map(pedidos => {

                    let data = {

                        key: pedidos.key,

                        nome: pedidos.nome,

                        preco: pedidos.preco,

                        bife: pedidos.acrecimos.bife,

                        queijo: pedidos.acrecimos.queijo

                    }

                    return (

                        <View style={styles.alinhamentoItem} key={data.key}>

                            <View style={styles.item}>

                                <Text>{data.nome}</Text>

                                <Text>{data.preco}</Text>

                                <Text>{data.bife === true ? "Sim" : "Não"}</Text>

                                <Text>{data.queijo === true ? "Sim" : "Não"}</Text>

                            </View>

                            <TouchableOpacity style={styles.lixeira} onPress={()=>handleRemove(pedidos)}>

                                <Icon name="trash-outline" size={30} color="#E98000" />

                            </TouchableOpacity>

                        </View>

                    );

                })} 

                {vetor.map(pedidos => { saldoFinal.push(pedidos.preco) })}

                {saldoFinal.forEach(pedidos => {

                    i += parseFloat(pedidos);

                })}
            </View>
            <Text>{i}</Text>
        </View>
    );
}
#2

No ReactJS/Native vc tem que usar os states (hooks ou class), no seu caso vc já com os Hooks.

Primeiro vc tem que criar um useState

//Pra importar vc coloca depois do import React
//import React, {useEffect, useState, useContext} from 'react'
const [pedidosList, setPedidosList] = useState([])

Depois tem que adicionar valores nessa tela assim que a tela.

useEffect(() => {
   setPedidosList(Pedidos);
}, [])

Lá na renderização vc troca vetor pra pedidosList. Agora pra excluir:

function deleteItem(nome){
    setPedidosList(pedidosList.filter(pedido => pedido.nome !== nome))
}

E la no seu map do return:

pedidosList.map((pedido, Index) => {
   return(
      <div>
         <span>{pedido.nome}</span>
         <button onClick={()=> deleteItem(pedido.nome)}> Deletar </button>
      </div>
   )
})

Pode ter algum erro de sintaxe pq tô falando pelo celular, e claro, eu te passei o exemplo básico, só pra vc adaptar no seu código

#3

Show eu avancei aqui porem ta tendo um problema que la no meu vetor que fiz no gerenciador de estado nao estou conseguindo remover o objeto certo, eu sei que tenho que usar o slice para remover porem não esta funcionando da forma certa, se puder dar uma ajuda.

#4

Fala meu amigo eu mudei a forma como eu adiciona os pedidos em vez de usar um vetor do javascript eu coloquei dentro de uma state do próprio react chamando a função assim o

async function addPedido(data){
        setH([...historico, data]);
    }

Dessa forma na minha screen de wallet eu recupero esse vetor como uma state e consigo realizar todas operações de remoção dele iguais a que vc me mostrou tanto nesse na state que guarda os objetos quanto na que mostra eles na tela da sacola, muito obrigado chefe.

1 curtida