React useReducer已接收到Payload但状态未更新问题咨询

状态不更新由三处核心代码错误导致，和useReducer接收payload的流程无关：

• 错误1：updateMarkers 分支的返回值结构存在语法级错误
  当前分支写法：

  case 'updateMarkers': {
    return {
      ...state,
      // 错误：将数组map的结果直接展开到state顶层
      ...state.markers.map(element => {
        return element.alt === payload.alt ? { ...element, ...payload } : element;
      })
    };
  }
  

  Array.map() 返回数组，直接展开到state第一层时，会以数组索引为键把元素挂载到state顶层，全程没有修改原state的markers属性。相当于payload传入后，原state的markers字段完全没有被触碰。
  正确实现：把map的结果重新赋值给markers字段，而不是展开到顶层：

  case 'updateMarkers': {
    return {
      ...state,
      markers: state.markers.map(element => 
        element.alt === payload.alt ? { ...element, ...payload } : element
      )
    };
  }
  

• 错误2：两套独立状态完全未打通，数据永远无法同步
  组件同时维护了两个互不关联的状态源：
  • const [user, setUser] = useState(...)：所有暴露给子组件的业务数据（标记点、头像、路由状态等）都来自这个状态，也是所有业务修改的目标
  • const [state, dispatch] = useReducer(...)：除了临时存个isLengthOfMarkersLessThanTwo的值，从来没有把useState里的user.markers同步进来。
    哪怕修正了上面的返回值结构错误，reducer内部的state.markers从初始化开始就是空数组，map遍历根本找不到匹配的元素，dispatch动作不会对实际使用的业务数据产生任何影响。
• 错误3：状态持久化逻辑和useReducer完全脱节
  写的localStorage读写逻辑，只绑定了useState的user值：
  • 写入逻辑只监听user变化，同步到本地
  • useReducer的初始值用硬编码的initialState，从来没有从本地存储读初始值
    两套状态的生命周期完全独立，不存在任何数据流转。

1. 统一状态管理逻辑：彻底移除独立的user useState，所有业务状态全部迁移到useReducer中维护
2. 修正updateMarkers分支的返回结构，确保标记点数组的更新正确写入state
3. 调整useReducer的初始化逻辑，从localStorage读取初始值；把本地存储同步逻辑绑定到useReducer的state变化上
4. 调整上下文暴露的接口：所有状态读取从useReducer的state取值，所有状态修改通过dispatch触发，不再保留独立的setUser类方法

修正后的核心逻辑参考：

// 初始化时从本地存储读值
const [state, dispatch] = useReducer(
  userReducer,
  initialState,
  (initVal) => getLocalStorage('user', initVal)
);

// 状态变化时自动同步到本地存储
useEffect(() => {
  setLocalStorage('user', state);
}, [state]);

// 上下文提供的方法直接绑定dispatch
// 原有的setUserMarkers、setUpdateUserMarker、resetUserMarkers等方法，全部改为对应dispatch动作的封装

内容的提问来源于stack exchange，提问作者Antonio Pavicevac-Ortiz