React.js计算器无法计算大数问题求助

我开发了一个基于React.js和math.js的计算器，小数值计算正常，但大数值计算时会出现错误：

• 大数值计算错误截图：
• 小数值正常计算截图：

核心代码 #

import { useState } from 'react';
import './App.css';
import Button from './components/Button';
import { Input } from './components/input';
import * as math from 'mathjs';
import Header from '../src/components/Header';

const App=()=> {
  const buttons= [
 {id:7,symbol:"7"},{id:8,symbol:"8"},{id:9,symbol:"9"}]

  const buttons2=[{id:4,symbol:"4"},{id:5,symbol:"5"},{id:6,symbol:"6"},{id:'+',symbol:"+"}]
  
  const buttons3=[{id:1,symbol:"1"},{id:2,symbol:"2"},{id:3,symbol:"3"},{id:'-',symbol:"-"}]

  const buttons4=[{id:'.',symbol:"."},{id:0,symbol:"0"},{id:'/',symbol:"/"},{id:'*',symbol:"x"}]

  const[text,setText]=useState("");
  const[result,setResult]=useState("");

  const addToText=(val)=>{
    setText((text)=>[...text, val+" "]);
  }

  const resetInput=()=>{
    setText("");
    setResult("");
  }   

  const calculateResult=()=>{
    try{
      const input=text.join("");
      setResult(math.evaluate(input));
    }catch(err){
      setResult("Error")
    }
  }
}

问题根源 #

1. 输入格式混乱：addToText给每个字符添加空格，导致大数字被拆分为单个数字字符加空格的形式（比如12345变成1 2 3 4 5），math.js无法识别这种零散格式为完整数值，解析失败。
2. 状态类型不匹配：text初始值是空字符串，但addToText用数组展开[...text]处理，会导致状态类型在字符串和数组间混乱，进一步加剧输入格式错误。

解决方案 #

方案1：统一字符串状态，修复输入拼接逻辑 #

把text改为纯字符串存储，去掉多余空格，同时修正乘号的格式（math.js识别*而非x）：

const[text,setText]=useState("");

const addToText=(val)=>{
  // 把按钮上的"x"转换为math.js支持的"*"
  const actualVal = val === "x" ? "*" : val;
  setText(prevText => prevText + actualVal);
}

const calculateResult=()=>{
  try{
    setResult(math.evaluate(text));
  }catch(err){
    setResult("Error")
  }
}

方案2：数组状态下合并连续数字 #

如果坚持用数组存储输入片段，需要合并连续的数字/小数点，避免拆分：

const[text,setText]=useState([]);

const addToText=(val)=>{
  setText(prev => {
    const lastItem = prev[prev.length - 1];
    const actualVal = val === "x" ? "*" : val;
    
    // 若当前值是数字/小数点，且上一个元素也是同类，合并为一个数值片段
    if ((!isNaN(actualVal) || actualVal === ".") && lastItem && (!isNaN(lastItem) || lastItem === ".")) {
      return [...prev.slice(0, -1), lastItem + actualVal];
    }
    // 运算符单独作为数组元素
    return [...prev, actualVal];
  });
}

const calculateResult=()=>{
  try{
    const input=text.join("");
    setResult(math.evaluate(input));
  }catch(err){
    setResult("Error")
  }
}

额外优化 #

math.js对极大数默认返回科学计数法，如需普通数字格式展示，可使用math.format：

setResult(math.format(math.evaluate(input), { notation: 'fixed' }));

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