使用useReducer的计算器应用点击按钮触发控制台错误求助

核心问题：你给useReducer传的初始状态是空对象{}，导致currentOperand、previousOperand、operation这三个属性一开始都是undefined。当点击数字按钮触发add_digit动作时，reducer里要对currentOperand做字符串拼接，但undefined根本没有拼接方法，所以直接报错了。

修复方法：

• 给useReducer设置完整的初始状态，把需要的属性都初始化好：

  function App() {
    const [{ currentOperand, previousOperand, operation }, dispatch] = useReducer(
      reducer,
      { currentOperand: '', previousOperand: '', operation: undefined }
    )
  }
  

• 顺带检查下reducer里的add_digit处理逻辑，确保拼接时不会踩空，比如可以加个判断：

  case 'add_digit':
    return {
      ...state,
      currentOperand: state.currentOperand ? state.currentOperand + action.digit : action.digit
    }
  

新手用useReducer一定要注意初始状态的完整性，所有后续要用到的属性最好都提前初始化，不然很容易碰到这种undefined的错误。

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