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

Question

Blockquote我无法在页面上显示结果，但new1Num和new2Num以及newOper是 Blockquote反映很好。结果仅显示在console.log（result）;中；我已经尝试将var结果带到main函数之外，并尝试使用const，还尝试了“ let [result，setNewAnsw] = useState（0）;”，就像我对new1Num所做的一样，但还是没有运气。

    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);设置/访问结果，并在表单的setNewAnsw(result)回调中使用onFormSubmit。删除let newResult = props.newResult;，因为newResult不会作为道具传递，它是在状态下计算的。另外，请使用“ ===” vs“ ==”进行比较。

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