回滚到以前的状态在反应查询中不起作用（乐观更新）

Question

我正在使用乐观更新反应查询，在这里我增加了关注者并更新了以下状态，下面是我的代码：

一切正常，但是当错误出现时，previousSnapshot 和 previousUserData 没有保存以前的值，它一次又一次地 returning 错误块中的变异或更新数据，它是应该 return 以前的状态但不是，请让我知道我在这里做错了什么。

const callFavoriteUserMutation = useMutation(favoriteUser, {
    onMutate: async _id => {
      const previousSnapshot = queryClient.getQueryData(`${id}userdetail`);
      const previousUserData = queryClient.getQueryData('getUserInfo');

      queryClient.setQueryData(`${id}userdetail`, (oldData: any) => {
        const updatedData = {...oldData};
        updatedData.stats.followers += 1;
        updatedData.following = true;
        return updatedData;
      });

      queryClient.setQueryData('getUserInfo', (oldUserData: any) => {
        const updatedData = {...oldUserData};
        updatedData.stats.following += 1;
        return updatedData;       
      });

      return {previousSnapshot, previousUserData};
    },

    onError: (error_code, _id, context: any) => {
      queryClient.setQueryData(`${id}userdetail`, context.previousSnapshot);
      queryClient.setQueryData('getUserInfo', context.previousUserData);
      setFollowing(context.previousSnapshot.following);
      setNoOfFollowers(context.previousSnapshot.stats?.followers);
      setNoOfFollowing(context.previousSnapshot?.stats?.following);
    },
  });

Answer 1

这是因为你正在改变原始数据。您只创建一个浅拷贝：

const updatedData = {...oldData};

然后改变深层属性：

updatedData.stats.followers += 1;
updatedData.following = true;

请不可变地更新，或者创建一个深层副本，或者如果您更喜欢可变语法，请使用类似 immer 的东西。

回滚到以前的状态在反应查询中不起作用（乐观更新）

Rollback to previous state is not working in react query (optimistic updates)

javascript

reactjs

react-query