运算符不是 return 预期结果

Question

平均值和中值计算器采用三个输入值，return向用户提供平均值和中值。中位数是 return 预期结果，因此我没有在下面包含它。问题是平均值太远了。

我已经 console.log 这些数字以确保它们在执行计算之前没有被操纵，但事实并非如此。我已经 console.log 将在 console.log 中输入的数字进行并排比较，例如

console.log((34 + 30 + 11)/ 3) //return 25

和上面的 returns 是正确的，但是输入字段中输入的值 return 114337.

 console.log((inputValue.val1 + inputValue.val2 + inputValue.val3) / 3) //return 114337 which is wrong

我已经多次查看我的代码，但没有看到任何东西，所以我决定 post 在这里多看几眼，希望能找到解决方案。

 const [min] = useState(0);
 const [CalcAvg, setCalcAvg] = useState(0);

 const [inputValue, setInputValue] = useState({
   val1: 0,
   val2: 0,
   val3: 0,
 });

 const handleChange = event => {
   const {name, value} = event.target;
   setInputValue(prev => {
     return {
       ...prev,
       [name]: value
     }
   })

 }

 const average = () => {
   // console.log("val1 " + inputValue.val1)
   // console.log("val2 " + inputValue.val2);
   // console.log("val3 " + inputValue.val3);

   /*** THE ISSUE IS HERE ****/

   console.log((inputValue.val1 + inputValue.val2 + inputValue.val3) / 3);

   //  setCalcAvg(avg);
 }


 const handleSubmit = event => {
   event.preventDefault()
   average()
   median()
   /*** THIS RETURNS THE CORRECT VALUE ****/
       console.log((34 + 30 + 11) / 3);

 }

 return (
   <main>
     <div>
       <form onSubmit={handleSubmit} className="form">
         <input
           name="val1"
           value={inputValue.val1}
           type="number"
           min={min}
           onChange={handleChange}
           required
         />
         <input
           name="val2"
           value={inputValue.val2}
           type="number"
           min={min}
           onChange={handleChange}
           required
         />
         <input
           name="val3"
           value={inputValue.val3}
           type="number"
           min={min}
           onChange={handleChange}
           required
         />
         <button onSubmit={handleSubmit} type="submit">
           Calculate
         </button>
       </form>
       <Results average={CalcAvg} />
     </div>
   </main>
 );```

Answer 1

它将您的值视为字符串而不是整数。所以它得到了正确的响应，因为它将 343011 除以 3。如果您使用 parseInt(inputValue.val1, 10) 将这些字符串强制转换为整数，您将获得 25 的预期结果。因为你没有 post 你的中值函数，我不能告诉你为什么它有效而这个无效。

您还可以在 handleChange 函数中应用 parseInt，方法是使用

[name]: parseInt(value, 10)

console.log(('34'+'30'+'11')/3)
console.log((parseInt('34', 10) + parseInt('30', 10) + parseInt('11', 10))/3)

运算符不是 return 预期结果

operator not return expected result

math

reactjs