React中如何使用switch case？为何提示case为禁用词？

一、你的switch语法本身没问题，但代码存在变量名错误 #

你定义的变量是firstNum和secondNum，但计算时误写为firstNumber和secondNumber，这会导致结果res为undefined。修正后的switch case代码如下：

const Calculatorpage = () => {
    function calculate() {
        const firstNum = Number(document.getElementById('firstNum').value)
        const secondNum = Number(document.getElementById('secondNum').value)
        const symbol = document.getElementById('symbol').value
        const result = document.getElementById('result')
        console.log("im in");
        let res
        switch (symbol) {
            case "+": 
                res = firstNum + secondNum;
                break;
            case "-":
                res = firstNum - secondNum;
                break;
            case "*":
                res = firstNum * secondNum;
                break;
            case "/":
                res = secondNum !== 0 ? firstNum / secondNum : "不能除以0";
                break;
            default:
                res = "请输入有效运算符";
                break;
        }
        result.value = res;
    }

    return (
        <div>
            <input id="firstNum" type="number" />
            <input id="symbol" placeholder="+" type="text" /> {/* 注意：没有type="symbol"，改用text类型 */}
            <input id="secondNum" type="number" />
            <input id="result" type="text" /> {/* 除法可能出现非数字结果，改用text更合适 */}
            <button type="button" onClick={calculate}>Go</button> {/* 无需submit类型，用button即可 */}
        </div>
    )
}

二、关于“case是禁用词”的提示 #

如果代码检查工具（比如ESLint）提示case禁用，大概率是启用了no-case-declarations规则（禁止在case块内直接声明变量），但你的代码只是赋值操作，并不违反规则。如果确实遇到规则限制，可以给case块套上大括号：

switch (symbol) {
    case "+": {
        res = firstNum + secondNum;
        break;
    }
    // 其他case同理
}

三、替代switch case的方案（无需if else） #

如果你不想用switch，推荐用对象映射的方式，代码更简洁易维护：

const Calculatorpage = () => {
    function calculate() {
        const firstNum = Number(document.getElementById('firstNum').value)
        const secondNum = Number(document.getElementById('secondNum').value)
        const symbol = document.getElementById('symbol').value
        const result = document.getElementById('result')
        
        const calcMap = {
            "+": () => firstNum + secondNum,
            "-": () => firstNum - secondNum,
            "*": () => firstNum * secondNum,
            "/": () => secondNum !== 0 ? firstNum / secondNum : "不能除以0"
        };
        
        // 执行计算，默认返回提示信息
        const res = calcMap[symbol] ? calcMap[symbol]() : "请输入有效运算符";
        result.value = res;
    }

    return (
        <div>
            <input id="firstNum" type="number" />
            <input id="symbol" placeholder="+" type="text" />
            <input id="secondNum" type="number" />
            <input id="result" type="text" />
            <button type="button" onClick={calculate}>Go</button>
        </div>
    )
}

额外优化提示 #

React中不推荐用document.getElementById获取DOM元素，建议使用useRef钩子更符合React的状态管理逻辑：

import { useRef } from 'react';

const Calculatorpage = () => {
    const firstNumRef = useRef(null);
    const secondNumRef = useRef(null);
    const symbolRef = useRef(null);
    const resultRef = useRef(null);

    function calculate() {
        const firstNum = Number(firstNumRef.current.value);
        const secondNum = Number(secondNumRef.current.value);
        const symbol = symbolRef.current.value;
        // ... 计算逻辑同上
        resultRef.current.value = res;
    }

    return (
        <div>
            <input ref={firstNumRef} type="number" />
            <input ref={symbolRef} placeholder="+" type="text" />
            <input ref={secondNumRef} type="number" />
            <input ref={resultRef} type="text" />
            <button type="button" onClick={calculate}>Go</button>
        </div>
    )
}

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