Javascript 使用React创建嵌套的条件setState变量值

我正在使用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
                    })
                })
            })
        }
    })

handleSubmit=（事件）=>{
event.preventDefault（）
这是我的国家({
速率：event.target.value
}, () => {
这是我的国家({
总费用：this.state.rate*220
})
如果（this.state.totalFees您应该建立一个您想要存储的数据的本地副本，然后只调用setState一次，其中包含所有更改。
您应该建立一个您想要存储的数据的本地副本，然后只调用setState一次，其中包含所有更改。
首先，您可能会得到奇怪的结果，因为
event.targetet.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
  }
);

只需在
handleSubmit
函数中调用它：

const incomeTax = calculateIncomeTax(totalFees);

首先，您可能会得到奇怪的结果，因为
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
  }
);

只需在
handleSubmit
函数中调用它：

const incomeTax = calculateIncomeTax(totalFees);

非常感谢。虽然我的totalFees变量仍然返回NaN，但这看起来容易多了。我认为这可能与一个单独的函数有关，我用它在浏览器中实时呈现rate和totalFees值。有什么想法吗？handleInputChange=（event）=>{event.preventDefault（）this.setState({[event.target.name]：event.target.value}，（）=>{this.setState（{totalFees:parseInt（this.state.rate*220，10}）}}@samalty，我想您需要将初始状态设置为
0
s，当
event.target.value
为空时

，您需要将其视为0。

parseInt（未定义）

和

parseInt（“”）

返回

NaN

非常感谢。虽然我的totalFees变量仍然返回NaN，但这看起来容易多了。我想这可能与一个单独的函数有关，我用它在浏览器中实时呈现rate和totalFees值。有什么想法吗？handleInputChange=（event）=>{event.preventDefault（）this.setState（{[event.target.name]：event.target.value}，（）=>{this.setState（{totalFees:parseInt（this.state.rate*220，10}）}}@samalty，我想您需要将初始状态设置为

0

s，当

event.target.value

为空时，您需要将其视为0。

parseInt（未定义）

和

parseInt（“”）

返回

NaN