React Context+useReducer状态更新后页面不渲染问题求助

你的问题出在reducer函数中直接修改了原状态对象，违反了React状态的不可变性原则。React的useReducer依赖状态引用的变化来识别状态更新，直接修改原对象不会改变其引用，因此组件无法感知到状态变化，也就不会重新渲染更新页面。

错误代码分析 #

在你的reducerFunc中，你直接修改了传入的state对象的属性：

const reducerFunc = (state, action) => {
  if(action.type === 'ADD') {
    state.number += action.val // 直接修改原state对象
    console.log(state.number)
    return state // 返回的还是原引用
  }
};

虽然控制台能打印出更新后的数值，但因为状态引用没有变化，React不会触发组件重渲染，页面依然显示默认值。

修复方案 #

修改reducer函数，返回一个新的状态对象，通过展开运算符复制原状态的所有属性，再更新需要修改的number值：

const reducerFunc = (state, action) => {
  if(action.type === 'ADD') {
    // 返回新的状态对象，保持原状态不可变
    return {
      ...state,
      number: state.number + action.val
    }
  }
  // 务必添加默认返回原状态的逻辑，处理未知action类型
  return state;
};

额外优化建议 #

1. 你的Context名称拼写有误（CountextNum应为ContextNum），虽然不影响功能，但建议修正以避免混淆。
2. 在Provider中传递value时，可以直接在JSX中构造对象，无需单独声明obj变量，简化代码：

return (
  <CountextNum.Provider value={{ number: mainState.number, addOne }}>
    {props.children}
  </CountextNum.Provider>
);

修改后，点击按钮时状态会生成新的引用，React会检测到变化并触发Header组件重渲染，页面就能正常显示更新后的数值了。

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