1

到目前为止，我是对查询做出反应并喜欢它的新手。我知道它主要是一个 UI 库。所以它非常适合处理/显示错误、加载状态。但是我经常发现自己想以异步的方式等待一些特定的操作。因此，我希望能够在触发操作（例如重定向）之前等待返回的承诺。

这是一个例子：

const NewPostForm = props => {
  const history = useHistory();
  const mutatePostInfo = useUpdatePost(); // useMutate hook
  const [value, setValue] = useState("")
  
  const handleSubmit = () => {
    mutatePostInfo.mutate(value);
    // I WANT TO: wait for the action to complete before redirecting
    history.push("/new-route/")
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
    </form>
  )
}
4

2 回答 2

4

返回的mutate函数useMutation将选项作为第二个参数，您可以onSuccess在突变成功时使用选项执行某些操作：

mutatePostInfo.mutate(
    value,
    {
        onSuccess: () => history.push("/new-route/")
    }
);

还有onError（对于错误）和onSettled回调（如果您想在成功或错误的情况下重定向）。

于 2020-12-31T13:04:38.733 回答
1

为了等待其他没有 onSuccess 函数的值或函数完成，您可以使用相关查询来暂停查询，直到该值存在/符合您的条件。

https://egghead.io/lessons/react-use-dependent-queries-to-delay-react-query-s-usequery-from-firing-on-render

const [payload, setPayload] = useState();
const someFunc = () => setPayload("data");

const { data } = useQuery(payload && ["queryKey", { payload }],
    queryName
  );

someFunc();

将等到有效负载有一个值，在本例中为“数据”，在它发送它的 queryName 请求之前，您还可以传入一个具有返回值的函数，该函数将等待该返回值。

于 2021-06-17T17:25:05.730 回答