Zustand更新嵌套对象状态时派生状态未正确同步问题

问题原因 #

派生状态计算时读取了更新前的旧状态值，没有获取到本次更新传入的最新zoom：

• 代码中canShowMarketResults和canShowCarouselResults的计算逻辑，直接读取了回调入参里的旧state.map.zoom
• 本次update里传入的新zoom仅被合并到了新的map对象中，计算派生字段时完全没有用到这个最新值，就会出现zoom本身更新正常，但派生字段值不跟随更新的问题。

修复方案 #

方案1（推荐）：移除冗余派生状态，用selector实时计算 #

不需要在store中存储可通过现有状态推导出来的字段，直接在使用状态时通过selector计算即可，从根源上避免多字段同步问题：

// 组件/业务逻辑中直接派生，无需手动维护更新
const canShowMarketResults = useMapStore(state => state.map.zoom <= MIN_RESULTS_ZOOM)
const canShowCarouselResults = useMapStore(state => state.map.zoom >= MIN_MAP_RESULTS_CAROUSEL_ZOOM)

只要map.zoom发生变化，上述计算值会自动响应更新，不需要在mapUpdate方法里写额外的赋值逻辑。

方案2：保留store内派生字段，修正取值逻辑 #

如果必须在store中存储这两个字段，先合并得到最新的map完整值，再基于最新值计算派生字段：

mapUpdate: (update: Partial<MapState['map']>) => {
  set((state) => {
    // 先合并得到更新后的完整map对象，拿到最新zoom值
    const mergedMap = {
      ...state.map,
      ...update
    }
    return {
      ...state,
      map: {
        ...mergedMap,
        canShowCarouselResults: mergedMap.zoom >= MIN_MAP_RESULTS_CAROUSEL_ZOOM,
      },
      canShowMarketResults: mergedMap.zoom <= MIN_RESULTS_ZOOM,
    };
  });
}

注意：如果选择方案2，后续所有修改map.zoom的store方法，都要同步更新这两个派生字段，漏改任意一处都会再次出现状态不同步问题。

内容的提问来源于stack exchange，提问作者Cristian Flórez