使用 React 創建嵌套的條件 setState 變量值

Question

我正在使用 React 嘗試構建一個計算器，當用戶通過表單輸入他們的日費率時，該計算器會執行許多稅收計算。 這要求我使用 setState 在我的 'handleSubmit' 函數中創建相當多的變量，其中大部分的值的公式包含先前創建的變量的值。 經過一些試驗和錯誤后，很明顯，如果不將新的 setState 組件嵌套在用於創建我希望調用的變量的前一個組件中，我就無法做到這一點。 我在下面分享了我的 handleSubmit 函數：

handleSubmit = (event) => {
    event.preventDefault()
    this.setState({
        rate: event.target.value
    }, () => {
        this.setState({
            totalFees: this.state.rate * 220
        })
        if (this.state.totalFees <= 8632) {
            this.setState({
                incomeTax: 0,
                nationalInsurance: 0
            });
        } else if (this.state.totalFees <= 12500) {
            this.setState({
                incomeTax: 0,
                nationalInsurance: ((this.state.totalFees - 8632) * .12)
            });
        } else if (this.state.totalFees <= 50000) {
            this.setState({
                incomeTax: ((this.state.totalFees - 12500) * .2),
                nationalInsurance: ((this.state.totalFees - 8632) * .12)
            });
        } else if (this.state.totalFees <= 150000) {
            this.setState({
                incomeTax: (7500 + ((this.state.totalFees - 50000) * .4)),
                nationalInsurance: (4964.16 + ((this.state.totalFees - 50000) * .02))
            });
        } else {
            this.setState({
                totalFees: this.state.rate * 220,
                incomeTax: (47500 + ((this.state.totalFees - 150000) * .45)),
                nationalInsurance: (4964.16 + ((this.state.totalFees - 50000) * .02))
            }, () => {
                this.setState({
                    combined: this.state.incomeTax + this.state.nationalInsurance,
                    insideAnnual: this.state.totalFees - (this.state.incomeTax + this.state.nationalInsurance)
                }, () => {
                    this.setState({
                        insideMonthly: Math.round((this.state.insideAnnual / 12) * 100) / 100
                    })
                })
            })
        }
    })

我遇到的主要問題是，當一個變量直接嵌套在另一個變量中時，它似乎能夠調用另一個變量的值，但當變量離得更遠時，情況似乎並非如此。 例如，我的應用程序當前為變量“insideAnnual”返回 NaN，它計算三個變量值 -“totalFees”、“incomeTax”和“nationalInsurance”。

記錄了包含 'insideAnnual' 的同一嵌套區域的值后，返回到控制台時，'incomeTax' 和 'nationalInsurance' 的值是正確的，但為靠近函數頂部的 'totalFees' 返回了 NaN並且似乎是問題所在。 我想知道解決方法是什么，因為當我嘗試在其嵌套組件之外提升 insideAnnual 變量時，它未能合並收入稅和國家保險值。

此外，這個函數已經很長了，但仍然不完整，因為我還沒有為每個 if 語句創建嵌套組件。 如果有人對我如何使其更簡潔有任何提示，那也將不勝感激。

為冗長的解釋道歉！

Answer 1

您應該建立您想要存儲的數據的本地副本，然后只調用一次 setState 並在其中進行所有更改。

Answer 2

首先，你可能會得到奇怪的結果，因為event.target.value是一個字符串，所以最好把它轉換成一個數字。 parseInt(event.target.value, 10) 。

其次，您不需要嵌套 setStates，您可以在函數內創建臨時變量，並在最后更新狀態值。 例如：

const rate = parseInt(event.target.value, 10);
const totalFees = rate * 220;
let incomeTax = 0;
let nationalInsurance = 0;
if (totalFees <= 12500) {
  // incomeTax stays the same, no need to update
  nationalInsurance = ((totalFees - 8632) * .12)
} else if (...) {
  // other calculations
}
// After all that logic is done, you set the state:
this.setState(
  {
    rate: rate,
    incomeTax: incomeTax,
    nationalInsurance: nationalInsurance
    // combined,
    // insideAnnual
    // insideMonthly
  }
);

您可以通過創建單獨的函數來計算nationalInsurance 、 incomeTax 、 combined 、 insideAnnual和insideMonthly來進一步改進這insideMonthly 。

更新：例如要計算incomeTax ，您可以創建另一個函數，例如：

const calculateIncomeTax = (totalFees) => {
  switch(true) {
    case totalFees <= 8632:
      return 0;
    case totalFees <= 12500:
      return 0;
    case totalFees <= 50000:
      return ((totalFees - 12500) * .2);
    case totalFees <= 150000:
      return (7500 + ((totalFees - 50000) * .4));
    default:
      return (47500 + ((totalFees - 150000) * .45))
  }
};

只需在您的handleSubmit函數中調用它：

const incomeTax = calculateIncomeTax(totalFees);