React实现的JavaScript计算器连续运算符处理逻辑问题求助

嘿，我最近用JS/React做了个计算器，但卡在了连续运算符的处理逻辑上，想请大家帮忙看看怎么调整！

我想要实现的效果是：当连续输入2个及以上运算符时，除了负号(-)之外，最终执行的操作要以最后输入的那个运算符为准。举两个具体例子：

• 2*-9应该计算得到-18（这里的负号是用来表示负数，不属于连续运算符范畴）
• 12*-/3应该计算得到4（这里最后输入的运算符是/，所以实际执行的是12/3）

另外还有个奇怪的小bug：当我输入5*-的时候，还没来得及输入第二个操作数，它就自动变成5*5了，完全不符合预期。

下面是我的代码片段：

const { useState } = React;

function Calculator() {
  const [displayValue, setDisplayValue] = useState('0');
  const [firstOperand, setFirstOperand] = useState(null);
  const [operator, setOperator] = useState(null);
  const [waitingForSecondOperand, setWaitingForSecondOperand] = useState(false);

  const inputDigit = (digit) => {
    if (waitingForSecondOperand) {
      setDisplayValue(String(digit));
      setWaitingForSecondOperand(false);
    } else {
      setDisplayValue(displayValue === '0' ? String(digit) : displayValue + digit);
    }
  };

  const inputDecimal = () => {
    if (!displayValue.includes('.')) {
      setDisplayValue(displayValue + '.');
    }
  };

  // 这里的运算符处理逻辑有问题，导致连续运算符和负号的情况没处理好
  const inputOperator = (nextOperator) => {
    const inputValue = parseFloat(displayValue);

    if (firstOperand === null) {
      setFirstOperand(inputValue);
    } else if (operator) {
      const result = calculate(firstOperand, inputValue, operator);
      setDisplayValue(String(result));
      setFirstOperand(result);
    }

    setWaitingForSecondOperand(true);
    setOperator(nextOperator);
  };

  const calculate = (first, second, op) => {
    switch (op) {
      case '+':
        return first + second;
      case '-':
        return first - second;
      case '*':
        return first * second;
      case '/':
        return first / second;
      default:
        return second;
    }
  };

  return (
    <div className="calculator">
      <div className="display">{displayValue}</div>
      <div className="buttons">
        <button onClick={() => inputDigit('7')}>7</button>
        <button onClick={() => inputDigit('8')}>8</button>
        <button onClick={() => inputDigit('9')}>9</button>
        <button onClick={() => inputOperator('/')}>/</button>
        <button onClick={() => inputDigit('4')}>4</button>
        <button onClick={() => inputDigit('5')}>5</button>
        <button onClick={() => inputDigit('6')}>6</button>
        <button onClick={() => inputOperator('*')}>*</button>
        <button onClick={() => inputDigit('1')}>1</button>
        <button onClick={() => inputDigit('2')}>2</button>
        <button onClick={() => inputDigit('3')}>3</button>
        <button onClick={() => inputOperator('-')}>-</button>
        <button onClick={() => inputDigit('0')}>0</button>
        <button onClick={() => inputDecimal()}>.</button>
        <button onClick={() => inputOperator('=')}>=</button>
        <button onClick={() => inputOperator('+')}>+</button>
      </div>
    </div>
  );
}

ReactDOM.render(<Calculator />, document.getElementById('root'));

有没有大佬能帮我调整inputOperator函数的逻辑，解决这两个问题呀？

备注：内容来源于stack exchange，提问作者tigertiger_74