在 onCompleted 执行之前加载状态更新会导致内容闪烁

Question

我目前的 React 组件中有这个突变：

import { useNavigate } from '@remix-run/react'
...

const MyComponent = () => {
  const { redirectTo } = useNavigate();
  ...

  const [mutateFunction, { loading }] = useMutation(SOME_MUTATION, {
    onCompleted: () => {
      redirectTo('/foo')
    },
  });

  ...
}

当突变完成时，

loading

状态发生变化，强制在执行

onCompleted

回调之前重新渲染反应组件。 这会导致在页面重定向之前页面上出现闪烁的内容。有什么方法可以在加载旋转器仍然显示时重定向，从而避免页面内容闪烁？

Answer 1

您需要使用单独的状态变量来跟踪加载状态，因为您的

useMutation

loading

状态更新和您的

onCompleted

处理程序之间存在竞争条件。 （我几乎倾向于将其视为 apollo-client 中的一个错误，但这是一个观点问题）

import { useNavigate } from '@remix-run/react'
import { useState } from 'react'
...

const MyComponent = () => {
  const { redirectTo } = useNavigate();
  const [loading,setLoading] = useState(false);
  ...

  const [mutateFunction] = useMutation(SOME_MUTATION, {
    onCompleted: () => {
      redirectTo('/foo');
      setLoading(false);
    },
  });

  ...
  …function that invokes the mutation {
    setLoading(true);
    mutateFunction();
  }
}