javascript - 使用 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”、“venueTax”和“nationalInsurance”。

记录了包含“insideAnnual”的同一嵌套区域的值后，返回到控制台时“venueTax”和“nationalInsurance”的值是正确的，但靠近顶部的“totalFees”返回了 NaN的功能，似乎是问题所在。我想知道解决方法是什么，因为当我尝试将 insideAnnual 变量提升到其嵌套组件之外时，它无法合并所得税和国民保险值。

此外，这个函数已经相当冗长但仍然不完整，因为我还没有为每个 if 语句创建嵌套组件。如果有人对我如何使其更加简洁有任何建议，我也将不胜感激。

对冗长的解释表示歉意!

Answer 1

您应该构建要存储的数据的本地副本，然后只调用一次 setState 来保存其中的所有更改。