反应等待 setState 完成然后调用一个函数

Question

当我的代码运行时，它使用旧值来表示兴趣，因为它是异步的，如何让 calcMoney 等待状态更新？提前致谢

更新这是整个代码，因为我刚刚开始反应，所以很可能真的搞砸了，究竟应该属于渲染中的内容以及其他地方应该是什么对我来说仍然是一个谜

import React, { useState } from "react";

function InputForm() {
  const [investinit, setInvestinit] = useState("");
  const [deposit, setDeposit] = useState("");
  const [interest, setInterest] = useState("");

  function changeInit(e) {
    setInvestinit(parseInt(e.target.value));
    console.log(e);
    calcMoney();
  }

  function changeDeposit(e) {
    if (e.target.value == "") {
      e.target.value = 0;
    }
    setDeposit(parseInt(e.target.value));
    calcMoney();
  }

  function changeInterest(e) {
    setInterest(parseFloat(e.target.value), () =>
    console.log(e);
  }

  function calcMoney() {
    var bigArr = [
      { totalAmount: investinit, tottalYield: 0, id: 0, totalMonthly: deposit },
    ];
    var monthlyInterest = interest / 1200 + 1;

    for (var i = 1; i < 13; i = i + 1) {
      var newTotal =
        investinit * Math.pow(monthlyInterest, i) +
        deposit * ((Math.pow(monthlyInterest, i) - 1) / (monthlyInterest - 1));
      var totalMonthly = deposit * i;
      var gain = newTotal - (investinit + totalMonthly);

      bigArr.push({
        totalAmount: newTotal,
        id: i,
        tottalYield: gain,
        totalMonthly: totalMonthly,
      });
      console.log(bigArr);
    }
  }

  return (
    <div className="wrapper">
      <div className="form-wrap">
        <form>
          <div className="form-body">
            <div className="form-item">
              <label>Investment Amount $</label>
              <input
                type="number"
                onChange={changeInit}
                value={investinit}
                placeholder="Investment Amount (required)"
                min="0"
                step="100"
                required
              />
            </div>
            <div className="form-item">
              <label>Monthly investment $</label>
              <input
                type="number"
                onChange={changeDeposit}
                value={deposit}
                placeholder="Monthly Deposit (optional)"
                min="0"
                step="100"
              />
            </div>
            <div className="form-item">
              <label>Annual interest %</label>
              <input
                type="number"
                onChange={changeInterest}
                value={interest}
                placeholder="Annual interest (required)"
                min="0"
                step="0.1"
                required
              />
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}
export { InputForm };

Answer 1

setState 函数采用一个可选的回调参数，可用于在状态更改后进行更新：

setInterest(parseFloat(e.target.value), () => {
   calcMoney();
}

或者，您可以使用 useEffect 并观察 'interest' 的值，并在它发生变化时执行计算。

useEffect(() => {
  calcMoney();
}, [interest]);

Answer 2

对于这个问题，您会发现三个有用的选项：

1. 您可以做的第一件事是在函数本身中使用 promise 和 await 函数。它可能会导致等待，直到异步函数获取数据，然后使用 setState 更新状态。
2. 第二种方法是使用回调函数。为此，您可以在异步函数中使用它，也可以更改 setState 函数以接受回调函数。以一种在获取（异步）完成后运行 setState 的方式。
3. 就是利用useEffect等待async函数的输出，当它发生变化时，useEffect会运行一个函数或者调用其他函数。

请注意，Fetch 已经返回了一个 Promise，所以它可能更多 使用它的声音。

Answer 3

使用内置的 React Context 进行修复，将值作为道具传递给计算器，并使用值提供者包装所有需要数据的组件。