为什么我的条件检查失败并触发了一个函数？

Question

我正在使用 react-query 挂钩，我的目标是将更新后的状态发送到数据库并接收更新后的状态。

我的对象是显示每一天锻炼情况的锻炼日记：

{
        name: "my workout diary",
        currentDay: 0,
        days: [
            {dayName: "monday", exercises: {...}},
            {dayName: "day 2", exercises: {...}},
            {dayName: "rest day", exercises: {...}}
        ]
    }

currentDay 字段中的数字表示当前从 days 数组呈现在屏幕上的日期。

我有 2 个按钮可以使用 useMutation 钩子将日期向前或向后移动：

    const query = useFirestoreDocument([...],ref);
    const mutation = useFirestoreDocumentMutation(
        ref,
        { merge: true },
        {
          onSuccess() {
            queryClient.invalidateQueries([...]);
          },
        }
      );
      const workoutplan = query.data?.data();

      const moveDayBack = () => {
        if (workoutplan && !mutation.isLoading) {
          workoutplan.currentDay > 0 &&
            mutation.mutate({
              currentDay: increment(-1),
            });
        }
      };

如果我慢慢地，一切都按照我想要的方式工作，但是如果我spam movedayback 函数无法通过条件检查并且将 -1 发送到服务器然后返回到 0，但这会导致致命错误，因为负数组索引将 return undefined.

为什么我的条件检查失败了，我该如何防止？

Answer 1

我不知道 increment 是如何工作的，但在我看来你的突变已经完成，但查询失效还没有。有两种方法可以防止在查询仍在运行:

时单击下一个/上一个

除了 !mutation.isLoading 之外还要检查 !query.isFetching，但是这也会涵盖其他类型的重新获取，例如 window 焦点重新获取。
return 来自 onSuccess 回调的查询失效：

onSuccess() {
    return queryClient.invalidateQueries([...]);
},

因为 queryClient.invalidateQueries return 是一个 Promise，你可以 return 它在 onSuccess 中。然后，突变将在内部 await 该 Promise，这意味着突变本身将保持加载状态，直到重新获取完成。

为什么我的条件检查失败并触发了一个函数？

Why are my conditional checks are failing and firing a function?

if-statement

function

reactjs

react-hooks

react-query