React js Calculator 最终结果显示在 console.log 中但不在浏览器中

Question

Blockquote I CAN NOT PUSH MY RESULT TO THE PAGE, BUT new1Num and new2Num as well as newOper is Blockquote reflected just fine. result only shows up inside console.log(result); I already tried taking var result outside of main function and tried const and also tried "let [result, setNewAnsw] = useState(0); " just like i did for new1Num but still no luck.

    import React, { useState } from 'react';
   // If the component accepts a parameter, this is referred to as a "prop."
   // Props allows to pass values INTO my components from a parent document / component.
   function Calculator (props)
   { // Every component should return JSX.
     const [new1Num, setNew1Num] = useState(0);
     const [new2Num, setNew2Num] = useState(0);
     const [newOper, setNewOper] = useState('add');
     // let [result, setNewAnsw] = useState(0);  
     var result;
     const onFormSubmit = event => 
     {
       event.preventDefault();
   
       console.log(new1Num);
       const a = parseFloat(new1Num);
   
       console.log(newOper);
   
       console.log(new2Num);
       const b = parseFloat(new2Num);
   
       let result;
       if (newOper == 'add'){
         result = a + b;
         console.log(result);
       }
       else if (newOper == 'subtract'){
         result = a - b;
       }
       else if (newOper == 'divide' && b !=0){
         result = a / b;
       }
       else if (newOper == 'multiply'){
         result = a * b;
       }
       return newResult = result; //IN THIS SECTION I CAN'T TAKE MY RESULT TO RENDER INSIDE DOM
     }
     let heading = props.heading;
     let input1 = props.input1;
     let input2 = props.input2;
     let newResult = props.newResult;
     return (
       <div>
         <h1> { heading } </h1>
         <form onSubmit = {onFormSubmit}> 
         <h2> { input1 } </h2>
         <input 
         type="number" min="0" step="1" 
         onChange={e => { setNew1Num( e.target.value ) }}
         value={new1Num}
         className='field' />
          <h2>Operator</h2>
           <select 
           onChange={e => { setNewOper( e.target.value ) }}
           value={newOper}
           className='oper' >
             <option value='add'>+</option>
             <option value='subtract'>-</option>
             <option value='divide'>/</option>
             <option value='multiply'>*</option>
           </select>
           <h2> {input2}</h2>
           <input 
         type="number" min="0" step="1" 
         onChange={e => { setNew2Num( e.target.value ) }}
         value={new2Num}
         className='field' />
         <h2></h2>
         <input type='submit' className='submitBtn success' value='Submit'/>
         <h3>RESULT: 
           {new1Num}
           {newOper} 
           {new2Num} 
           {newResult}
         </h3>
         </form>
       </div>
     );//new1Num and newOper and new2Num are populating inside browser just fine
   }
   export default Calculator

Answer 1

为了将结果发布到页面，React 需要重新呈现。这可以通过将结果保存到状态并在完成计算时更新来实现。

使用 const [result, setNewAnsw] = useState(0); 到 set/access 结果，并在表单的 onFormSubmit 回调中使用 setNewAnsw(result)。删除 let newResult = props.newResult; 因为 newResult 不是作为 prop 传递的，它是在状态中计算的。另外，使用“===”与“==”进行比较。

...
const [result, setNewAnsw] = useState(0);

const onFormSubmit = (event) => {
  event.preventDefault();

  console.log(new1Num);
  const a = parseFloat(new1Num);

  console.log(newOper);

  console.log(new2Num);
  const b = parseFloat(new2Num);

  let result;
  if (newOper === "add") {
    result = a + b;
    console.log(result);
  } else if (newOper === "subtract") {
    result = a - b;
  } else if (newOper === "divide" && b) { // b any value other than 0 is truthy!
    result = a / b;
  } else if (newOper === "multiply") {
    result = a * b;
  }

  setNewAnsw(result);
};
...

React js Calculator 最终结果显示在 console.log 中但不在浏览器中

React js Calculator final result shows inside console.log but not in the browser

javascript

if-statement

calculator

reactjs