反应:如何防止表单提交后整数值变为 NaN

Question

我正在使用 React 构建一个税收计算器。目前它只由两个功能组成。handleInputChange 用于在浏览器中实时呈现输入的"费率"和"总费用"值。handleSubmit 在用户输入"rate"值后进行计算。

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

我的问题是，一旦提交表格，"总费用"和"费率"的值就会变成 NaN。奇怪的是，虽然"所得税"、"国民保险"和"组合"的计算工作(这意味着它们基于"费率"的原始输入和由此产生的"总费用"值(，但 NaN 返回我的其他变量值。有人可以解释为什么有问题的变量在表单提交时返回 NaN 以及我可以做些什么来防止这种情况？谢谢。

Answer 1

不要在任何地方使用 parseInt，当它已经 int 你不需要解析它时：

尝试更改：

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

Answer 2

您应该使用 prop-types 来控制变量的数据类型。 例如：文件名：人员.js

第 1 步：

导入库：

import { PropTypes } from 'prop-types';

第 2 步：

class Person extends Component {
render() {
return (
<div className='Person'>
<p onClick={this.props.xyz}>I am {this.props.name} and I am {this.props.age} years old!</p>
<p>{this.props.children}</p>
<input type="text" onChange={this.props.xyzchanged} defaultValue={this.props.name}/>
</div>
)
}
}
Person.propTypes = {
xyz:PropTypes.func,
name:PropTypes.string.isRequired, // name is required to be passed when called in Persons.js render method
age:PropTypes.number,
xyzchanged:PropTypes.func
}
export default Person;

使用 prop-types，如果变量没有您期望的数据类型，您将在控制台中看到警告。另外，我建议您也使用控制台.log。