Question

我正在尝试将值分配给2个不同的州（借记），然后计算各州的答案并将其分配给第三状态（余额）。我的余额状态并未立即更新第一次更改会显示初始值。
我想要的解决方案是（贷方-借方）的计算值并存储在余额状态

`

function App() {

  const [credit, setCredit] = useState(0);
  const [debit, setDebit] = useState(0);
  const [balance, setBalance] = useState(0); 

  const [records, setRecords] = useState([
    {
      credit: 1200,
      debit: 0,
      balance: 1200,
    },
    {
      credit: 1000,
      debit: 0,
      balance: 1000,
    },
  ]);

  const getInfo = (e) => {
    e.preventDefault();

    setBalance(credit - debit);  //<- Not updated on very first change

    setRecords([...records, 
      {
        credit: credit,
        debit: debit,
        balance: balance,
      },
    ]);
    setCredit(0);
    setDebit(0);
    setBalance(0);
  };

  return (
    <div className="App">
      <form>
        <label>Credit</label>
        <input
          type="number"
          value={credit}
          onChange={(e) => setCredit(e.target.value)}
        />
        <label>Debit</label>
        <input
          type="number"
          value={debit}
          onChange={(e) => setDebit(e.target.value)}
        />
        <button type="submit" onClick={getInfo}>
          SAVE
        </button>
      </form>

      {records.map((record) => (
        <p>
           credit:{record.credit},debit:{record.debit} balance:{record.balance}
        </p>
      ))}
    </div>
  );
}

`

Answer 1

对于首次更新，您可能希望将代码保留在useEffect中。它将解决问题。

Answer 2

反应状态更新是异步的。在getInfo中执行 setBalance（credit-debit）时，它不会立即更新余额。状态更新通常也通过反应组合在一起，因此，由于您在之后执行setBalance（0），因此将其直接设置为0。建议不要保持计算属性不变，您可以这样做

    setRecords([...records, 
      {
        credit: credit,
        debit: debit,
        balance: credit - debit,
      },
    ]);

Answer 3

您的默认值balance是0

const [balance, setBalance] = useState(0);

在首次使用时，您不会更新该值：

setBalance(credit - debit); // 0 - 0 = 0;

useState不会立即更新

3 个答案: