使用 Socket.io 连接的 React RTK 查询在数据更新期间表现异常

Question

我正在使用带有 RTK 查询和 Socket.io 的 React 制作一个基本的多人游戏。我遵循了订阅案例的 RTK 查询文档，他们制作了一个聊天应用程序。 基本上，我所做的唯一更改不是将新数据附加到数组的末尾，而是使用单个对象而不是我想更新。 但是当我尝试使用一个对象时，它仍然是 {}。

烦人的是，如果我使用数组解决方案，它工作得很好。 （所以只使用 array[0] 作为草稿）

所以基本上唯一的区别是：

1. initGame: builder.query<ClientGame[],...

   ->

   initGame: builder.query<ClientGame,...

2. queryFn: () => ({ data: [] })

   ->

   queryFn: () => ({ data: {} as ClientGame })

3. draft[0] = newGameState

   ->

   draft = newGameState

工作正常：

export const menuApi = createApi({
    reducerPath: 'menuApi',
    baseQuery: fetchBaseQuery({
        baseUrl: '/'
    }),
    tagTypes: ['Menu'],
    endpoints: (builder) => ({
        initGame: builder.query<ClientGame[], void>({
            queryFn: () => ({ data: [] }),
            async onCacheEntryAdded(
                _, // arg
                { updateCachedData, cacheEntryRemoved }
            ) {

                const socket = getSocket();
                try {
                    socket.on(ServerEvents.InitGame, (newGameState: any) => {
                        updateCachedData((draft) => {
                            draft[0] = newGameState
                        })
                    })

不会返回实际数据：

export const menuApi = createApi({
    reducerPath: 'menuApi',
    baseQuery: fetchBaseQuery({
        baseUrl: '/'
    }),
    tagTypes: ['Menu'],
    endpoints: (builder) => ({
        initGame: builder.query<ClientGame, void>({
            queryFn: () => ({ data: {} as ClientGame }),
            async onCacheEntryAdded(
                _, // arg
                { updateCachedData, cacheEntryRemoved }
            ) {

                const socket = getSocket();
                try {
                    socket.on(ServerEvents.InitGame, (newGameState: any) => {
                        updateCachedData((draft) => {
                            draft = newGameState
                        })
                    })

Vs 代码甚至认为草稿未被使用