Skip to main content
adicionou 1446 caracteres ao conteúdo
Fonte Link
Rebeca Nonato
  • 1,2mil
  • 12
  • 32

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

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>
    )
}
Fonte Link
Rebeca Nonato
  • 1,2mil
  • 12
  • 32

React com Hooks, useState, o valor envia a cada dado inserido e não mostra na tela.?

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