React State 中更新结果的一步延迟

Question

我有一个非常简单的计算器，可以通过React计算两个输入，并且我result在更新状态时遇到问题（result通过名为 的函数更新状态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;

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

这是我在codesandbox中的代码

Answer 1

无需保持result状态，只需calc在渲染时使用该方法计算结果即可。

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

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

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;

这消除了方法的复杂混乱changeHandler并使代码更具可读性。