Zustand更新数组latestBidsFromSocket时旧数据丢失问题

问题根因 #

该问题是典型的JavaScript闭包陷阱，和concat方法本身无关：
你在自定义Hook中解构获取的latestBidsFromSocket是当前组件渲染周期的store状态快照，并非store中存储的实时最新值。如果更新逻辑是在socket消息监听、持久化事件回调这类不会随组件重渲染重新生成的函数中调用，闭包中缓存的latestBidsFromSocket会一直是回调注册时的旧值（通常是初始空数组），每次拼接都是拿旧值和新数据合并后覆盖store，自然会丢失之前存储的历史数据。

修复方案 #

优先使用Zustand原生支持的函数式更新，完全绕开闭包对旧状态的缓存问题，不需要在Hook中提前解构依赖的数组状态：

1. 首先优化store的更新方法，兼容函数式入参：

export const useSocketDataStore = create((set) => ({
  socketConnection: {},
  setSocketConnection: (connection) => set({ socketConnection: connection }),
  latestBidsFromSocket: [],
  setLatestBidsFromSocket: (bids) => set((state) => ({
    latestBidsFromSocket: typeof bids === 'function' ? bids(state.latestBidsFromSocket) : bids
  })),
}));

2. 修改自定义Hook的更新逻辑，通过函数式入参获取实时的旧状态，同时去掉不必要的状态解构减少无效重渲染：

import { useSocketDataStore } from './store';

export const useUpdateSocketDataStore = () => {
  // 只订阅需要的更新方法，不订阅数组本身，避免数组变化触发Hook所在组件重渲染
  const setLatestBidsFromSocket = useSocketDataStore(state => state.setLatestBidsFromSocket);
  const updateLatestBidsSocket = (data) => {
    // 入参prev是store中存储的最新数组值，不受闭包缓存影响
    setLatestBidsFromSocket((prev) => [data].concat(prev));
  };
  return { updateLatestBidsSocket };
};

排查要点 #

• 检查更新方法是否在socket监听、setTimeout/setInterval这类长生命周期回调中调用，这类场景是闭包问题重灾区
• 所有依赖旧状态的store更新操作，都优先用函数式更新写法，不要直接引用组件/Hook作用域中解构出来的状态做合并
• 如果坚持要引用解构出的状态做更新，必须用useCallback包裹更新函数，并把对应状态加入依赖数组，保证状态变化后更新函数会重新生成，持有最新的闭包值——但这种写法更容易出依赖遗漏问题，性能也更差，不推荐使用。

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