0

Salve galera, estou aprendendo react ainda, me desculpem se a pergunta é tola demais, mas estou apanhando em um caso:

Estou desenvolvendo um app de controle financeiro, e conforme o usuario vai adicionando rendas e despesas ele vai atualizando na tela, os seguintes valores: entradas, saídas e total.

O entradas e saídas estou conseguindo fazer legal, porém o total, não é alterado em tela assim que eu adiciono uma transação, pois ele depende do valor do state entradas, e do state saídas (total = entradas-saídas), usei o Hook UseEffect para monitorar sempre que o state de transactions for alterado, e executar a seguinte função:

  useEffect(() => {
    transactions.map(transaction => {
      if(transaction.value < 0){
        setExpenses(expenses + parseFloat(transaction.value))
      }else {
        setIncomes(incomes + parseFloat(transaction.value))
      }
      setTotal((total) => total = incomes + expenses)
      
    })
  }, [transactions])

Utilizei uma função callback no setTotal, pra pegar o valor atual do state, pois sei que o setState é assincrono, mas mesmo assim, ele sempre altera o valor de total atrasado, sempre que adiciono uma transação, ele pega o valor da anterior a transação adicionada, alguém pode me dar uma luz ? agradeço desde já

1 Resposta 1

0

Oi, geralmente quando a gente precisa fazer a soma em um array, tendemos a usar o reduce

Array.prototype.reduce()

Então uma boa idei seria somar esse valores e depois adicionar ao useState

Então para o expenses ficaria:

const expensesReduce = transactions.reduce((prevState, currentValue) => {
  const valorDaTransacao = Number(currentValue.value);
  if (valorDaTransacao < 0) return prevState + valorDaTransacao;
  return prevState;
}, 0);

Para o incomes ficaria:

const incomesReduce = transactions.reduce((prevState, currentValue) => {
  const valorDaTransacao = Number(currentValue.value);
  if (valorDaTransacao > 0) return prevState + valorDaTransacao;
  return prevState;
}, 0);

E para o total seria:

const totalReduce = transactions.reduce((prevState, currentValue) => {
  const valorDaTransacao = Number(currentValue.value);
  return prevState + valorDaTransacao;
}, 0);

E tem como fazer os três de uma vez só:

   const transactionReduce = transactions.reduce(
  (prevValue, currentValue) => {
    const valorDaTransacao = Number(currentValue.value);
    const indexReduce = valorDaTransacao < 0 ? "expensesReduce" : "incomesReduce";

    return {
      ...prevValue,
      totalReduce: prevValue.totalReduce + valorDaTransacao,
      [indexReduce]: prevValue[indexReduce] + valorDaTransacao
    };
  },
  { totalReduce: 0, expensesReduce: 0, incomesReduce: 0 }
);

Também fiz no codesandbox pra exemplificar:

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 .