React计算器点击按钮文本框无值及eval计算空结果问题排查

问题概述 #

我用React开发基础计算器，界面灰色区域包含输入、输出两个文本框。点击数字/运算按钮后，输入框无内容显示；点击等号后，计算结果也无法在输出框呈现。核心问题是handleClick函数中eval(this.state.question)返回空值，无法生成正确计算结果。

核心错误点及修复步骤 #

1. 按钮未设置value属性

当前Button组件仅传递了label，但handleClick中通过event.target.value获取按钮值，导致无法正确捕获点击的内容，state根本没更新。

修复： 给每个Button添加value属性，与label对应：

<div className="button-row">
  <Button handleClick={this.handleClick} label={'Clear'} value="Clear"/>
  <Button handleClick={this.handleClick} label={'Delete'} value="Delete"/>
  <Button handleClick={this.handleClick} label={'.'} value="."/>
  <Button handleClick={this.handleClick} label={'/'} value="/"/>
</div>
<div className="button-row">
  <Button handleClick={this.handleClick} label={'7'} value="7"/>
  <Button handleClick={this.handleClick} label={'8'} value="8"/>
  <Button handleClick={this.handleClick} label={'9'} value="9"/>
  <Button handleClick={this.handleClick} label={'*'} value="*"/>
</div>
// 其余按钮同理，数字按钮value设为对应数字，运算符按钮设为对应符号

2. 直接修改state且未用异步更新逻辑

default分支中this.setState({ question: this.state.question += value})是直接修改state（React禁止直接突变state），且setState是异步操作，会导致状态更新不一致。

修复： 改用函数式更新state：

default: {
  this.setState(prevState => ({
    question: prevState.question + value
  }));
  break;
}

3. 输出组件未绑定state数据

OutputScreen组件未接收question和answer属性，导致输入/输出框无法显示state中的内容。

修复：

• 先修改OutputScreen组件，接收并渲染状态数据：

function OutputScreen({ question, answer }) {
  return (
    <div className="output-screen">
      <input type="text" value={question} readOnly className="input-box"/>
      <input type="text" value={answer} readOnly className="output-box"/>
    </div>
  );
}

• 在render中传递state给OutputScreen：

<OutputScreen question={this.state.question} answer={this.state.answer}/>

4. handleClick的this指向问题

如果未在构造函数中绑定this，handleClick中的this会指向undefined，无法访问state和setState。

修复： 在组件构造函数中绑定this：

constructor(props) {
  super(props);
  this.state = {
    question: '',
    answer: ''
  };
  this.handleClick = this.handleClick.bind(this);
}

5. eval逻辑优化

原代码中捕获错误后未直接跳出，可能导致后续逻辑执行异常，同时需判断计算结果是否为有效数值：

case '=': {
  if (this.state.question!=='') {
    let ans;
    try {
      // 注意：eval存在安全风险，生产环境建议使用表达式解析库（如math.js）替代
      ans = eval(this.state.question);
    } catch(err) {
      this.setState({answer: "Math Error"});
      break; // 报错后直接跳出，避免后续无效判断
    }
    if (ans === undefined || isNaN(ans)) {
      this.setState({answer: "Math Error"});
    } else {
      this.setState({ answer: ans.toString(), question: ''});
    }
    break;
  }
  break;
}

最终效果 #

完成以上修复后，点击按钮时输入框会实时显示输入的表达式，点击等号后输出框会呈现正确计算结果；异常表达式会显示Math Error。

内容的提问来源于stack exchange，提问作者amitabha