为什么我的React计算器函数点击计算后返回NaN?
问题成因
- 核心错误是
count3方法内调用count()、count2()时未传入参数:两个方法都要求接收数字参数用于更新state,无参数调用时形参值为undefined,undefined + undefined的计算结果就是NaN。 - 逻辑冗余:点击数字按钮时,已经通过
count、count2方法将选中的数值存储到了state的num1、num2字段中,计算阶段不需要重复调用这两个方法,直接读取state中已有的值即可。
修复方案
直接修改count3方法的逻辑,读取state中已存储的两个数字相加即可,修改后的代码如下:
count3 = () => { this.setState({ answer: this.state.num1 + this.state.num2 }, () => { // 如果需要打印更新后的answer,要放在setState的回调里(因为setState是异步更新) console.log(this.state.answer) }) }
修改完成后点击计算按钮即可正常输出两个选中数字的和。
内容的提问来源于stack exchange,提问作者asdfgh
相关产品推荐
相关产品推荐

