React计算器useReducer除法运算后无法实时渲染问题咨询

核心问题1：Reducer直接修改原状态对象，未返回新对象 #

React的useReducer依赖状态引用的变化触发组件重渲染。你的reducer中所有case都是直接修改传入的state对象（比如state.stateValue = ...），然后返回原对象。这种情况下，状态的引用没有改变，React无法感知状态更新，自然不会触发重渲染。

其他运算能显示结果，是因为在dispatch后调用了setPreviousValue/setCurrentValue（这些是useState的更新），这些操作会触发组件重渲染，从而间接读取到reducer修改后的状态；而除法分支里没有这些useState的更新，所以组件不会重渲染，只有重新编译时才会读取最新状态。

核心问题2：除法分支未重置UI相关状态变量 #

在handleQual的除法分支中，你只调用了dispatch，没有像其他运算那样重置previousValue、currentValue。这些变量的更新会触发组件重渲染，而除法分支缺少这一步，导致即使reducer正确更新了状态，组件也不会刷新。

额外问题：Reducer的default分支返回错误 #

default分支应该返回原状态，而不是执行console.log后返回undefined，这会导致状态异常。

修复后的代码修改 #

1. 修改Reducer，返回新的状态对象 #

所有case都要创建新对象，不要直接修改原state：

const reducer = (state, action) => {
    switch(action.type) {
      case "SUM":
        return {
          ...state,
          stateValue: state.stateValue + (action.payloadOne + action.payloadTwo)
        };
      case "SUBSTRACT":
        return {
          ...state,
          stateValue: state.stateValue + (action.payloadOne - action.payloadTwo)
        };
      case "MULTIPLE":
        if (state.stateValue === 0 && state.stateControl) {
          return {
            ...state,
            stateValue: action.payloadOne * action.payloadTwo,
            stateControl: false
          };
        } else {
          return {
            ...state,
            stateValue: state.stateValue * (action.payloadOne * action.payloadTwo)
          };
        }
      case "DIVIDE":
        if (state.stateValue === 0 && state.stateControl) {
          return {
            ...state,
            stateValue: action.payloadOne / action.payloadTwo,
            stateControl: false
          };
        } else {
          return {
            ...state,
            stateValue: state.stateValue / (action.payloadOne / action.payloadTwo)
          };
        }
      default:
          return state;
    }
}

2. 完善handleQual的除法分支，添加状态重置 #

在除法的dispatch后，添加和其他运算类似的状态重置：

else if (operator === "/") {
  dispatch({type:"DIVIDE",payloadOne:parseInt(previousValue),payloadTwo:parseInt(currentValue)});
  setPreviousValue("");
  setCurrentValue("");
}

3. 优化UI显示逻辑（可选） #

当前UI显示逻辑在结果为0时会展示currentValue，可调整为更合理的默认值：

<div className='text-2xl mr-1'>{result.stateValue || currentValue || "0"}</div>

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