React用Context与Reducer实现Redux功能点击后状态返回undefined问题

核心错误点 #

• Reducer返回值结构与初始state不匹配
• Reducer缺少默认返回分支

错误原因说明 #

你的初始state是结构为{number: 5}的对象，但在处理DO_ACTION类型的action时，直接执行state + action.payload，会触发JS的隐式类型转换，将对象转为字符串[object Object]后和数字拼接，返回值变成字符串类型，不再包含number属性，后续访问state.number自然返回undefined。同时reducer没有默认分支，遇到未知action时会直接返回undefined，也会导致state被覆盖为无效值。 #

修复后的代码 #

Reducer代码 #

const Reducer = (state, action) => {
  switch (action.type) {
    case 'DO_ACTION':
        // 返回和初始state结构一致的对象，只更新number属性
        return {
          ...state,
          number: state.number + action.payload
        }
    // 添加默认分支，不匹配的action直接返回原有state
    default:
        return state
  }
};

export default Reducer;

可选优化点 #

你Button组件的incrementAction函数中，dispatch后立即打印state.number拿不到最新值，这是因为React的state更新是异步的，如果你需要拿到更新后的值，可以在组件内加useEffect监听state.number的变化。

内容的提问来源于stack exchange，提问作者Q-man