Javascript 更新结果处于React状态时的一步延迟

我有一个非常简单的计算器，它通过React计算两个输入，我在状态下更新

结果时遇到问题（通过一个名为
calc
的函数更新
结果
状态）。这是在下一个动作中完成的，而不是现在

总之，现在结果状态计算出错误的值

我的代码：

const App = () => {
  const [state, setState] = useState({
    firstVal: 0,
    secondVal: 0,
    operator: "+",
    result: 0
  });

  const { firstVal, secondVal, operator, result } = state;

  const calc = (firstVal, secondVal, operator) => {
    if (operator === "+") {
      return firstVal + secondVal;
    } else if (operator === "-") {
      return firstVal - secondVal;
    } else if (operator === "*") {
      return firstVal * secondVal;
    } else if (operator === "/") {
      return firstVal / secondVal;
    }
  };

  const changeHandler = e => {
    setState({
      ...state,
      [e.target.name]:
        e.target.name === "operator" ? e.target.value : Number(e.target.value),
      result: calc(firstVal, secondVal, operator)
    });
  };

  return (
    <div className="App">
      <input name="firstVal" onInput={changeHandler} />

      <select name="operator" onChange={changeHandler}>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>

      <input name="secondVal" onInput={changeHandler} />

      <p>{result}</p>
    </div>
  );
};

export default App;

const-App=（）=>{
常量[状态，设置状态]=使用状态({
firstVal:0，
第二个值：0，
运算符：“+”，
结果：0
});
常量{firstVal，secondVal，运算符，result}=state；
常量计算=（第一个值、第二个值、运算符）=>{
如果（运算符==“+”）{
返回firstVal+secondVal；
}else if（运算符==“-”）{
返回firstVal-secondVal；
}else if（运算符==“*”）{
返回firstVal*secondVal；
}else if（运算符==“/”）{
返回firstVal/secondVal；
}
};
常量changeHandler=e=>{
设定状态({
……国家，
[e.target.name]：
e、 target.name==“operator”？e.target.value:Number（e.target.value），
结果：计算（第一个值、第二个值、操作员）
});
};
返回(
+
-
*
/
{result}

);
};
导出默认应用程序；

我想我不了解React中的异步和状态

这是我在
中的代码，而不是在您的状态中保存
结果
，只需在渲染时使用
计算方法计算结果即可

  return (
    <div className="App">
      <input name="firstVal" onInput={changeHandler} />

      <select name="operator" onChange={changeHandler}>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>

      <input name="secondVal" onInput={changeHandler} />

      <p>{calc(firstVal, secondVal, operator)}</p>
    </div>
  );

返回(
+
-
*
/
{calc（firstVal，secondVal，operator）}

);

我也不会使用状态对象-对每个状态变量使用不同的状态值和方法，例如：

import React, { useState } from "react";
import "./styles.css";

const App = () => {

  const [firstVal, setFirstVal] = useState(0)
  const [secondVal, setSecondVal] = useState(0)
  const [operator, setOperator] = useState('+')

  const calc = (firstVal, secondVal, operator) => {
    if (operator === "+") {
      return firstVal + secondVal;
    } else if (operator === "-") {
      return firstVal - secondVal;
    } else if (operator === "*") {
      return firstVal * secondVal;
    } else if (operator === "/") {
      return firstVal / secondVal;
    }
  };

  return (
    <div className="App">
      <input name="firstVal" onInput={e => setFirstVal(Number(e.target.value))} />

      <select name="operator" onChange={e => setOperator(e.target.value)}>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>

      <input name="secondVal" onInput={e => setSecondVal(Number(e.target.value))} />

      <p>{calc(firstVal, secondVal, operator)}</p>
    </div>
  );
};

export default App;

import React，{useState}来自“React”；
导入“/styles.css”；
常量应用=（）=>{
常量[firstVal，setFirstVal]=useState（0）
const[secondVal，setSecondVal]=使用状态（0）
常量[operator，setOperator]=useState（“+”）
常量计算=（第一个值、第二个值、运算符）=>{
如果（运算符==“+”）{
返回firstVal+secondVal；
}else if（运算符==“-”）{
返回firstVal-secondVal；
}else if（运算符==“*”）{
返回firstVal*secondVal；
}else if（运算符==“/”）{
返回firstVal/secondVal；
}
};
返回(
setFirstVal（数字（e.target.value））}/>
setOperator（e.target.value）}>
+
-
*
/
setSecondVal（数字（如target.value））}/>
{calc（firstVal，secondVal，operator）}

);
};
导出默认应用程序；

这消除了
changeHandler
方法的复杂混乱，使代码更具可读性。
问题在于：

const changeHandler = e => {
    setState({
      ...state,
      [e.target.name]:
        e.target.name === "operator" ? e.target.value : Number(e.target.value),
      result: calc(firstVal, secondVal, operator)
    });
  };

调用
calc
时，它仍然具有来自当前状态的值，而不是通过
onChange
/
onInput
处理程序设置的新值，因此观察到的陈旧结果

编辑：这个答案试图解释观察到的行为发生的原因。关于如何解决这个问题，请参阅Tom的答案。
您能准确地指出您的问题是什么吗？从您的描述中目前还不清楚。您误解了状态是如何工作的，并且您似乎试图使用一个
changeHandler
函数来执行4个不同的任务。您不应该将结果存储为状态，因为结果是使用已处于状态的值计算的。我希望我的结果显示正确的值@你说你对国家一无所知。你可以解释你哪里出了问题。@JMadelaine tnx，你是说每个处理程序都需要一个特定的、单独的状态？谢谢，我的解决方案是把你的答案和汤姆的答案结合起来。