React开发计算器调用eval报SyntaxError: Unexpected end of input错误

错误产生原因 #

• setState 是异步更新 API，调用后不会立刻修改 this.state 上的属性值。你在 setState 执行后立刻读取 this.state.equation 拿到的还是更新前的旧值，第一次输入时旧值是空字符串，eval('') 会直接抛出语法不完整的报错。
• 输入过程中很容易出现不完整的表达式（比如输入了1+还没输入后面的数字），这种不合法的表达式传入eval也会触发同样的语法错误。

修复方案 #

你可以根据需求选择两种修复方向：

方案1：保留输入时实时计算的逻辑 #

调整handleChange逻辑，把eval放到setState的回调中保证拿到最新状态，同时加异常捕获处理不合法的表达式：

// 原函数名绑定在onChange上语义不符，可顺便调整
handleInputChange = (e) => {
  const newEquation = e.target.value;
  this.setState({ equation: newEquation }, () => {
    // 状态更新完成后再执行eval，加try catch捕获异常
    try {
      // 空字符串跳过eval避免报错
      if (this.state.equation.trim()) {
        const calcResult = eval(this.state.equation);
        console.log(calcResult);
        // 可自行补充将结果存入state展示的逻辑
      }
    } catch (err) {
      // 表达式不合法时可以自定义提示逻辑，避免程序崩溃
      console.log('表达式不合法');
    }
  });
}

方案2：改为点击按钮后再计算 #

如果不需要实时计算，把计算逻辑移到enter按钮的点击事件中，体验更友好，也能避免输入过程中频繁触发报错：

// 输入框只负责同步输入内容
handleInputChange = (e) => {
  this.setState({ equation: e.target.value });
}

// 按钮点击时执行计算逻辑
handleCalculate = () => {
  try {
    const result = eval(this.state.equation);
    console.log(result);
    // 示例：将结果存到state展示
    this.setState({ equation: String(result) });
  } catch (err) {
    console.log('表达式有误，请检查输入');
  }
}

// render部分对应修改事件绑定
render() {
  return (
    <div>
      <input
        type="text"
        value={this.state.equation}
        onChange={this.handleInputChange}
      ></input>
      <h1>{this.state.equation}</h1>
      <button onClick={this.handleCalculate}>enter</button>
    </div>
  );
}

额外提示：eval会执行任意传入的代码，存在XSS安全风险，如果是线上对外项目建议替换为专门的表达式解析库，或者自行实现语法解析逻辑。

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