React中useState解构错误：setCalculation不是函数的原因排查

你遇到的这个报错核心原因是useState的解构方式错误：

React的useState Hook返回的是一个数组，而非对象，所以必须使用数组解构（方括号[]）来获取状态和状态更新函数，而不是对象解构（大括号{}）。你当前的写法：

let { calculation, setCalculation } = useState("");
let { result, setResult } = useState("");

相当于从数组中读取名为calculation和setCalculation的属性，但数组并没有这些属性，导致setCalculation被赋值为undefined，调用时自然会抛出“不是函数”的错误。

修复方案 #

把useState的解构改为数组形式即可：

let [calculation, setCalculation] = useState("");
let [result, setResult] = useState("");

额外的代码优化提示 #

你的代码里还有几处逻辑问题可以修正：

1. else if(value === '+/-' && value.parseInt() > 0)这行逻辑错误，value是'+/-'，调用parseInt会得到NaN，永远不满足条件。应该判断当前calculation的值，比如：

else if(value === '+/-' && calculation !== ''){
    setCalculation(prev => prev.startsWith('-') ? prev.slice(1) : '-' + prev);
}

2. 使用Function(calculation + value).toString()来计算结果存在安全风险，且逻辑不对（这样并不会执行表达式得到结果），建议改用eval（注意仅在可控场景下使用）或者更安全的表达式解析库，比如：

if (!operations.includes(value)) {
    try {
        // 把乘号x替换成*，否则eval无法识别
        const expr = calculation.replace('x', '*') + value.replace('x', '*');
        setResult(eval(expr).toString());
    } catch (e) {
        // 处理表达式错误的情况
        setResult('Error');
    }
}

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