1

Estou querendo fazer uma operação matemática simples a partir de dois números aleatórios quando clico no botão, porém, cada vez que clico no botão o resultado mostrado em tela é da operação anterior e não consigo deixar correto.

Exemplo:

Resultado 1 -> 2 + 2 =  0;
Resultado 2 -> 3 + 5 =  4;
Resultado 3 -> 5 + 5 =  8;
Resultado 4 -> 2 + 6 = 10;

import React, { useState } from "react";
import * as math from "mathjs";
import "./styles.css";

export default function Card() {
  const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(0);
  const [operation, setOperation] = useState("");
  const [result, setResult] = useState(0);

  function handleSubmit() {
    // Gera valores aleatórios para os números de 0 a 10
    setNumber1(parseInt(Math.random() * (11 - 0) + 0));
    setNumber2(parseInt(Math.random() * (11 - 0) + 0));
    // Cria uma string com a operação completa
    setOperation(`${number1}+${number2}`);
    // Define o resultado a partir da string
    setResult(math.evaluate(operation));
  }
  return (
    <div className="card">
        <h1>Treino de cálculo</h1>
        <h2>
            {operation} = {result}
        </h2>
        <input type="number" placeholder="Sua resposta" />
        <button onClick={() => handleSubmit()}>
            Verificar resposta
        </button>
    </div>
  );
}

2 Respostas 2

2

As atualizações dos estados dos componentes não é tão simples como parece, são assíncrono, em resumo demora um tempo para acontecer e as variáveis com os novos estados precisam ser vigiadas para tomar alguma decisão, no seu código basicamente para funcionar:

function Card() {
  const [number1, setNumber1] = React.useState(0);
  const [number2, setNumber2] = React.useState(0);
  const [operation, setOperation] = React.useState("");
  const [result, setResult] = React.useState(0);

  function random() {
    return parseInt(Math.random() * (11 - 0) + 0);
  }
  React.useEffect(() => {
    setOperation(`${number1}+${number2}`);    
  },[number1, number2]);
  React.useEffect(() => {
    setResult(state => number1 + number2);
  }, [operation]);
  function handleSubmit() {    
    setNumber1(state => random());
    setNumber2(state => random());    
    
  }
  return (
    <div className="card">
        <h1>Treino de cálculo</h1>
        <h2>
            {operation} = {result}
        </h2>
        <input type="number" placeholder="Sua resposta" />
        <button onClick={() => handleSubmit()}>
            Verificar resposta
        </button>
    </div>
  );
}

ReactDOM.render( <Card/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

nesse exemplo aguarda alterar o estado das duas variáveis: number1 e number2 depois atualiza a variável operation e por fim mostro todos os resultados, ou seja, tem uma sequencia lógica de atualização para funcionar.

Existe uma maneira bem melhor e para mim mais confiável, exemplo:

function Card() {
  const [data, setData] = React.useState({
    number1: 0,
    number2: 0
  });  
  const [result, setResult] = React.useState({
    operation: '', 
    result: 0
  });
  function random() {
      return parseInt(Math.random() * (11 - 0) + 0);
  }
  function handleSubmit() {    
    const number1 = random();
    const number2 = random();
    setData({number1, number2});      
  }
  React.useEffect(() => {
    const { number1, number2 } = data;
    const operation = `${number1} + ${number2}`;
    const result = number1 + number2;
    setResult({
      operation,
      result
    });    
  }, [data]);
  return (
    <div className="card">
        <h1>Treino de cálculo</h1>
        <h2>
            {result.operation} = {result.result}
        </h2>
        <input type="number" placeholder="Sua resposta" />
        <button onClick={() => handleSubmit()}>
            Verificar resposta
        </button>
    </div>
  );
}

ReactDOM.render( <Card/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

nesse segunda forma é criado um objeto e quando esse objeto for alterado, eu altero o objeto de resultado é mais fácil controlar as alterações e a sequencia das variáveis do estado.

4
  • Obrigado Virgilio, como ainda to aprendendo react tem coisas aí que não faço ideia do que seja hahah, mas vou dar uma olhada direitinho e estudar o código. Quando completar vou colocar no meu github :D. Muito Obrigado!
    – Yago Juan
    Commented 11/09/2020 às 0:58
  • @YagoJuan se for util assinale como resposta !
    – novic
    Commented 11/09/2020 às 1:00
  • Bom novamente recebi um voto negativo, não sei os motivos que levaram para tal, acredito ser sim perseguição. Não sei qual atitude tomar!
    – novic
    Commented 11/09/2020 às 15:37
  • Virgilio, eu consegui com o seu primeiro código, só tive que fazer algumas pequenas alterações para encaixar melhor no meu projeto. Muito obrigado pela ajuda. Eu marquei como resposta
    – Yago Juan
    Commented 11/09/2020 às 21:53
0

Creio que se você colocar um useEffect pra executar a função quando montar os componentes resolva seu problema:

import React, {useState, useEffect} from "react";
import "./styles.css";
import * as math from "mathjs";

export default function Card() {
  const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(0);
  const [operation, setOperation] = useState("");
  const [result, setResult] = useState(0);

  useEffect(() => {
    handleSubmit();
  },[])

  function handleSubmit() {
    // Gera valores aleatórios para os números de 0 a 10
    setNumber1(parseInt(Math.random() * (11 - 0) + 0));
    setNumber2(parseInt(Math.random() * (11 - 0) + 0));

    // Cria uma string com a operação completa
    setOperation(`${number1}+${number2}`);

    // Define o resultado a partir da string
    setResult(math.evaluate(operation));
  }

  return (
    <div className="card">
      <h1>Treino de cálculo</h1>
      <h2>
        {operation} = {result}
      </h2>
      <input type="number" placeholder="Sua resposta" />
      <button onClick={() => handleSubmit()}>Verificar resposta</button>
    </div>
  );
}
1
  • também recai na mesma resposta de outro companheiro, já explique e reforço as atualizações são assíncronas, ou seja, não são sequenciais por isso não vai dar certo.
    – novic
    Commented 11/09/2020 às 0:50

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 .