React计算器：如何使用Math-expression-evaluator防止单个数字出现多个小数点？

我明白你遇到的困扰了——当前的handleDecimalClick只检查了最后一个元素是否为小数点，但没考虑到当前正在输入的数字段（比如123.45这种连续数字+小数点的组合）里已经存在小数点的情况。我们需要调整逻辑，先判断当前输入的数字部分是否已经包含小数点，再决定是否添加新的小数点。

解决方案思路 #

核心是：从输入数组的末尾往前遍历，找到最近的运算符（或者数组开头），检查这段连续的数字内容里是否已经有小数点。如果有，就不再添加；如果没有，再执行添加逻辑，同时处理运算符后直接点小数点的边界情况（自动补0，避免表达式无效）。

修改后的代码实现 #

首先添加一个辅助函数，用来检查当前数字段是否已有小数点：

const hasDecimalInCurrentNumber = () => {
  // 从数组末尾往前遍历，直到遇到非数字的运算符
  for (let i = input.length - 1; i >= 0; i--) {
    const element = input[i];
    if (element === '.') {
      // 当前数字段已经有小数点，返回true
      return true;
    }
    // 判断是否是运算符（假设运算符是字符串且无法转为有效数字）
    if (typeof element === 'string' && isNaN(parseFloat(element))) {
      // 遇到运算符，说明当前数字段结束，没有小数点
      return false;
    }
  }
  // 遍历到数组开头都没遇到运算符，检查整个数组是否有小数点
  return input.includes('.');
};

然后修改handleDecimalClick函数：

const handleDecimalClick = (e) => {
  const lastElement = input[input.length - 1];

  // 第一步：检查当前数字段是否已有小数点，有则直接返回
  if (hasDecimalInCurrentNumber()) {
    return;
  }

  // 处理运算符后直接点小数点的情况（自动补0，避免表达式错误）
  if (typeof lastElement === 'string' && isNaN(parseFloat(lastElement))) {
    setInput([...input, 0, e]);
    return;
  }

  // 最后一个元素是整数，直接添加小数点
  if (Number.isInteger(lastElement)) {
    setInput([...input, e]);
  }
};

测试覆盖的场景 #

• 正常数字添加小数点：输入[1,2] → 点小数点 → [1,2,'.']，再次点小数点无反应，符合预期。
• 已有小数点的数字：输入[1,2,'.',3] → 点小数点无反应，正确阻止重复添加。
• 运算符后点小数点：输入[1, '+'] → 点小数点 → [1, '+', 0, '.']，自动补0保证表达式合法。
• 初始状态点小数点：输入[0] → 点小数点 → [0, '.']，再次点小数点无反应。

这样修改后，就能彻底解决单个数字重复添加小数点的问题，同时兼顾了表达式的合法性。

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