1

Estou fazendo um cálculo de Juros Compostos.

Recebo os dados do formulário valores.js, chamado pela função enviarValores() com o onSubmit={handleSubmit(enviarValores)} e quero enviar as respostas results (um array) para o arquivo de Resultados.js

porém, para cada dado inserido, no console.log, ele já mostra os resultados. Mas não mostra na tela. Somente quando eu insiro um novo dado.

inserir a descrição da imagem aqui

Dúvida, como fazer para ele chamar o Resultados.js somente quando eu clicar no botão de enviar?

E o que há de errado no mostrar os dados na tela?

Arquivos

Valores.js

import useForm from "../../controllers/useForm";
import { Container } from "./styles";
import Resultados from "../resultados/Resultados";


export default () => {
    const [{ values, loading }, handleChange, handleSubmit] = useForm();
    const [results, setResults] = useState([]);

    const enviarValores = () => {
      const capitalInicial  = parseFloat(values.montanteInicial) || null;
      const rate    = parseFloat(values.taxaJurosMensal) || null;
      const period  = parseInt(values.periodoMeses) || null;

      let totalAmount = 0;
      // let valorMensalPorcentagem = 0;
      let valorMensal = 0;
      let taxaJurosPorcentagem = rate / 100;

      for (let i = 1 ; i <= period ; i++) {

        totalAmount = capitalInicial * ((1 + taxaJurosPorcentagem)**i);

        valorMensal = totalAmount - capitalInicial;

        results.push({ month: i, totalAmount: totalAmount.toFixed(2), valorMensal: valorMensal.toFixed(2)});
      };
    };

    useEffect(() => {
      return () => {
        setResults(results);
      }
    },);

    return (
      <div className="row">
        <Container>
          <div className="row titulo">
            <h1>Juros Composto</h1>
          </div>
          <form className="col s12" onSubmit={handleSubmit(enviarValores)}>
            <div className="row">
              <div className="input-field col s6">
                <input
                  onChange={handleChange}
                  name="montanteInicial" 
                  id="montanteInicial" 
                  type="number" 
                  className="validate"
                  required 
                  step="0.01"
                  min="1000" 
                  max="99999"
                />
                <label htmlFor="montanteInicial">Montante Inicial</label>
              </div>
            </div>
            <div className="row">
              <div className="input-field col s6">
                <input
                  onChange={handleChange}
                  name= "taxaJurosMensal" 
                  id="taxaJurosMensal" 
                  type="number" 
                  className="validate"
                  required 
                  step="0.01"
                  min="-99999.99" 
                  max="999999.99" 
                />
                <label htmlFor="taxaJurosMensal">Taxa de Juros Mensal</label>
              </div>
            </div>
            <div className="row">
              <div className="input-field col s6">
                <input
                  onChange={handleChange}
                  type="number" 
                  id="periodoMeses" 
                  name="periodoMeses" 
                  className="validate" 
                  required 
                  pattern="[0-9]+$"
                  min="1" 
                  max="90"
                />
                <label 
                  htmlFor="periodoMeses" 
                  data-error="Preencha o campo com a quantidade de meses" 
                  className="active">Período (meses)
                </label>
              </div>
            </div>
            <button className="btn waves-effect waves-light" type="submit" name="action">{loading ? "Enviando..." : "Enviar"}</button>
          </form>
        </Container>

        <Resultados results={results} />

      </div> 
    
    );
}

Resultados.js


function Resultados({results}) {
    
    console.log(results);
    
    
    return(
        <div>
            <ul>
                { results.map((row, i) => 
                    <li key={i}>
                    <strong scope='row'>{row.month}</strong>
                    <p>R${row.totalAmount}</p>
                    </li>
                )}
            </ul>
        </div>
    )
}

export default Resultados;

O código está disponível em https://stackblitz.com/edit/juros-compostos

codigo após a alteraçao

  const enviarValores = () => {
      const capitalInicial  = parseFloat(values.montanteInicial) || null;
      const rate    = parseFloat(values.taxaJurosMensal) || null;
      const period  = parseInt(values.periodoMeses) || null;
      const resultsAux = [];

      let totalAmount = 0;
      // let valorMensalPorcentagem = 0;
      let valorMensal = 0;
      let taxaJurosPorcentagem = rate / 100;

      for (let i = 1 ; i <= period ; i++) {

        totalAmount = capitalInicial * ((1 + taxaJurosPorcentagem)**i);

        valorMensal = totalAmount - capitalInicial;

        resultsAux.push({ month: i, totalAmount: totalAmount.toFixed(2), valorMensal: valorMensal.toFixed(2)});
      };
      setResults(resultsAux);
    };

    useEffect(() => {
      return () => {
        setResults([]);
      }
    },[]);


function Resultados({results}) {
    
    
    return(
        <Container>
            <ul>
                { results.map((row, i) => 
                    <li key={i}>
                    <strong scope='row'>{row.month}</strong>
                    <p>R${row.totalAmount}</p>
                    </li>
                )}
            </ul>
        </Container>
    )
}
0

1 Resposta 1

1

Olá, Rebeca!

Pelo que eu entendi no seu código, você tentou inserir valores ao estado result usando o result.push. O correto para inserir valores nesse caso seria usar:

setResult([
   ...results, 
   { month: i, 
     totalAmount: totalAmount.toFixed(2), 
     valorMensal: valorMensal.toFixed(2)
   }
])

O correto ao atribuir dados a um estado é SEMPRE utilizar sua função, e não atribuir de modo direto.

3
  • Eu fiz desta forma, mas ele só inseriu o ultimo registro do loop. Como utilizar dentro do for??? ``` for (let i = 1 ; i <= period ; i++) { totalAmount = capitalInicial * ((1 + taxaJurosPorcentagem)**i); valorMensal = totalAmount - capitalInicial; setResults([ ...results, { month: i, totalAmount: totalAmount.toFixed(2), valorMensal: valorMensal.toFixed(2) } ])``` Commented 22/06/2020 às 12:06
  • Consegui, vou colocar o código com o resultado. Commented 22/06/2020 às 15:56
  • 1
    Que ótimo que você conseguiu!! Tem que ter muito cuidado ao usar Set de algum state dentro do for, pois a função set dos states não retornam valor em tempo de execução, elas são assíncronas Commented 22/06/2020 às 16:10

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 .