Erro ao cadastrar informações em aplicação ReactJS

[arissonlima]

Olá pessoal, tudo blz?

Vê se vocês conseguem me ajudar com essa situação que é a seguinte:

Criei essa aplicação ReactJS com base em algumas aulas do Ignite da Rocketseat. A aplicação após todas as aulas ficou funcionando da mesma forma que nas aulas. Após isso, criei uma API por minha conta para servir essa aplicação. Configurei, aparentemente tudo certinho, a aplicação está puxando os dados de forma correta da API, porém na hora de cadastrar uma nova transação, ela exibe alguns erros, a tela fica branca, mas se atualizar a página vai carregar normal novamente e com o dado cadastrado. Porém não estou entendendo este erro, ou estes erros, se alguém aí que tem mais experiência com ReactJS puder me ajudar, abaixo segue os links:

Essa é a tela com o erro:

---

Link da API: https://dtmoney.conradodigital.com.br
Link da aplicação: https://rocketseat-ignite-dtmoney.vercel.app
Link do código no Github: GitHub - arissonlima/rocketseat-ignite-dtmoney

[lucashpmelo]

Esse erro acontece porque você está tentando ler o valor de title e type de um objeto que está definido como undefined. Será mais fácil identificar o problema se você postar o trecho do código que isso está ocorrendo.

[arissonlima]

Ok man, vou postar aqui o código do erro:

Segue o código onde está o erro:

import { useTransactions } from '../../hooks/useTransactions';

import incomeImg from '../../assets/income.svg';
import outcomeImg from '../../assets/outcome.svg';
import totalImg from '../../assets/total.svg';

import { Container } from './styles';

export function Summary(){

  const { transactions } = useTransactions();

  const summary = transactions.reduce((acc, transaction) => {
    if(transaction.type === "deposit"){
      acc.deposits += transaction.amount;
      acc.total += transaction.amount;
    }else{
      acc.withdraws += transaction.amount;
      acc.total -= transaction.amount;
    }

    return acc;
  }, {
    deposits: 0,
    withdraws: 0,
    total: 0,
  });

  return(
    <Container>
      <div>
        <header>
          <p>Entradas</p>
          <img src={incomeImg} alt="Entradas" />
        </header>
        <strong>
          {new Intl.NumberFormat('pt-BR', {
            style: 'currency',
            currency: 'BRL',
          }).format(summary.deposits)}
        </strong>
      </div>

      <div>
        <header>
          <p>Saídas</p>
          <img src={outcomeImg} alt="Saídas" />
        </header>
        <strong>
          -&nbsp;
          {new Intl.NumberFormat('pt-BR', {
            style: 'currency',
            currency: 'BRL',
          }).format(summary.withdraws)}
        </strong>
      </div>

      <div className="highlight-background">
        <header>
          <p>Total</p>
          <img src={totalImg} alt="Total" />
        </header>
        <strong>
          {new Intl.NumberFormat('pt-BR', {
            style: 'currency',
            currency: 'BRL',
          }).format(summary.total)}
        </strong>
      </div>
    </Container>
  );
}

Imagem apontando mais ou menos o local que ele acusa o erro:

[lucashpmelo]

Bom, você já possui a linha onde ocorre o erro, use um console.log para ver o conteúdo da transactions e outro antes do seu if para verificar o conteúdo da transaction:

console.log(transactions) // <-- transactions...
const summary = transactions.reduce((acc, transaction) => {
    console.log(transaction) // <-- transaction...

    if(transaction.type === "deposit"){
      acc.deposits += transaction.amount;
      acc.total += transaction.amount;
    }else{
      acc.withdraws += transaction.amount;
      acc.total -= transaction.amount;
    }

    return acc;
  }, {
    deposits: 0,
    withdraws: 0,
    total: 0,
  });

Assim você consegue debugar seu código.

[Dragoon]

@arissonlima

const { transactions } = useTransactions();

o que tem aqui? fica complicado dizer se saber o layout que vem aqui, se vem um array de objeto, se puder descreva de forma total, ele está dando um sublinhado em vermelho em type pode ser varias coisas precisa saber o tipo e o que vem ai, talvez, venha nulo, indefinido algo assim e por isso faz colocar um teste ou ?.

Aqui nesse trecho de código:

{new Intl.NumberFormat('pt-BR', {
        style: 'currency',
        currency: 'BRL',
}).format(summary.deposits)}

transforme em um componente, já há repetição no seu código por causa disso.

[arissonlima]

Pô mano valeu pela força em me ajudar, sou novo com ReactJS. E não faço a mínima ideia de como resolver este problema, com os consoles log que falou pra mim adicionar, coloquei e ele mostra o seguinte:

Tipo, ele cadastra mas o último item cadastrado ele mostra como undefined, mas se atualizar a página ele vai mostrar de forma correta dentro do objeto dos dados.

[Dragoon]

então vamos lá tem um item no seu array que vem nulo:

if (transaction) {
    if(transaction.type === "deposit"){
        acc.deposits += transaction.amount;
        acc.total += transaction.amount;
       } else {
          acc.withdraws += transaction.amount;
         acc.total -= transaction.amount;
    }
}

então precisa testar é o item 6 ele vem sem objeto, na hora de enviar esse array de objetos (json) teria que no código não enviar items indefinidos, mas, com essa simples verificação acredito que funcione.

[lucashpmelo]

A resposta do @Dragoon vai ajudar a parar de quebrar sua aplicação, mas você ainda vai ter que continuar debugando para descobrir o porque a ultima posição do Array está ficando indefinida. Como você está consumindo uma API, verifique primeiro se o problema não está no retorno dela.

[Dragoon]

perfeito @lucashpmelo boa dica e bom ter lembrado, realmente não faz sentido ter um item na lista indefinido, na minha visão complementando isso não pode acontecer e se deve ter cuidado com itens indefinidos.

[Zeca_Peteca]

usa a sintaxe obj?.prop.
conhece o operador ternário, né? Então, o operador ?. é uma abreviação para objetos.

// isso
obj.prop? // prop está definido?
obj.prop : // se sim, usa ele
null // se não, null

//vira isso
obj?.prop

E os erros de propriedades indefinidas desaparecem.

[arissonlima]

Agradeço a atenção e a ajuda de todos, fiz tudo que me recomendaram, mas sem sucesso. Mas entendo o processo, sou iniciante.

[Dragoon]

Da um console.log depois da atribuição do summary…