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
                    })
                })
            })
        }
    })

我遇到的主要问题是，当一个变量直接嵌套在其中时，它似乎能够调用另一个变量的值，但当变量距离较远时，情况似乎并非如此。例如，我的应用程序当前正在为变量“insideAnnual”返回 NaN，它计算三个变量值 - “totalFees”、“incomeTax”和“nationalInsurance”。

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

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

为冗长的解释道歉！

标签： javascriptreactjs

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

问题描述

解决方案

推荐阅读