在更新Zustand的数组时丢失旧数据

发布于 2025-02-06 12:10:01 字数 856 浏览 2 评论 0原文

export const useSocketDataStore = create((set) => ({
  socketConnection: {},
  setSocketConnection: (connection) => set({ socketConnection: connection }),
  latestBidsFromSocket: [],
  setLatestBidsFromSocket: (bids) => set({ latestBidsFromSocket: bids }),
}));



    import { useSocketDataStore } from './store';

    export const useUpdateSocketDataStore = () => {
      const { latestBidsFromSocket, setLatestBidsFromSocket } =
        useSocketDataStore();
      const updateLatestBidsSocket = (data) => {
        setLatestBidsFromSocket([data].concat(latestBidsFromSocket));
      };
      return { updateLatestBidsSocket };
    };

我使用此自定义挂钩更新Zustand Store。但是，当我尝试将新值限制为最新bidsfromsocket 中，我将旧数据放在中。

原文

export const useSocketDataStore = create((set) => ({
  socketConnection: {},
  setSocketConnection: (connection) => set({ socketConnection: connection }),
  latestBidsFromSocket: [],
  setLatestBidsFromSocket: (bids) => set({ latestBidsFromSocket: bids }),
}));



    import { useSocketDataStore } from './store';

    export const useUpdateSocketDataStore = () => {
      const { latestBidsFromSocket, setLatestBidsFromSocket } =
        useSocketDataStore();
      const updateLatestBidsSocket = (data) => {
        setLatestBidsFromSocket([data].concat(latestBidsFromSocket));
      };
      return { updateLatestBidsSocket };
    };

i use this custom hook to update the zustand store. but i loose old data in latestBidsFromSocket when i try to concat new value into it.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

执笔绘流年 2025-02-13 12:10:01

我解决了问题。这是因为关闭。在updateTaTeStsocket函数中，最新bidsfromsocket的值在updateTaTelateStbidsSocket的每个函数中保持不变。

我纠正了下面的代码。

import { useEffect, useState } from 'react';
import { useSocketDataStore } from './store';

export const useUpdateSocketDataStore = () => {
  const { latestBidsFromSocket, setLatestBidsFromSocket } =
    useSocketDataStore();
  const [latestBidSocketData, setLatestBidSocketData] = useState({});

  useEffect(() => {
    if (Object.keys(latestBidSocketData).length) {
      setLatestBidsFromSocket(
        [latestBidSocketData].concat(latestBidsFromSocket)
      );
    }
  }, [latestBidSocketData]);

  return { setLatestBidSocketData };
};

I got the issue fixed. It was because of the closure. The value of the latestBidsFromSocket passed to the updateLatestBidsSocket function remain same in every function call of updateLatestBidsSocket.

I corrected the code like below.

import { useEffect, useState } from 'react';
import { useSocketDataStore } from './store';

export const useUpdateSocketDataStore = () => {
  const { latestBidsFromSocket, setLatestBidsFromSocket } =
    useSocketDataStore();
  const [latestBidSocketData, setLatestBidSocketData] = useState({});

  useEffect(() => {
    if (Object.keys(latestBidSocketData).length) {
      setLatestBidsFromSocket(
        [latestBidSocketData].concat(latestBidsFromSocket)
      );
    }
  }, [latestBidSocketData]);

  return { setLatestBidSocketData };
};

回复收藏 0 原文