`useRevalidator`

出于窗口焦点或轮询间隔等正常数据变异之外的原因，重新验证页面上的数据。

import { useRevalidator } from "@remix-run/react";

function WindowFocusRevalidator() {
  const revalidator = useRevalidator();

  useFakeWindowFocus(() => {
    revalidator.revalidate();
  });

  return (
    <div hidden={revalidator.state === "idle"}>
      Revalidating...
    </div>
  );
}

当调用操作时，Remix 已经自动重新验证页面上的数据。如果您发现自己出于对用户交互的响应而对数据进行正常的 CRUD 操作时使用此功能，那么您可能没有利用其他 API（如 <Form>、useSubmit 或 useFetcher）自动执行此操作。

属性

`revalidator.state`

重新验证的状态。可以是 "idle" 或 "loading"。

`revalidator.revalidate()`

启动重新验证。

function useLivePageData() {
  const revalidator = useRevalidator();
  const interval = useInterval(5000);

  useEffect(() => {
    if (revalidator.state === "idle") {
      revalidator.revalidate();
    }
  }, [interval, revalidator]);
}

备注

虽然您可以同时渲染 useRevalidator 的多个实例，但在底层它是一个单例。这意味着当调用一个 revalidator.revalidate() 时，所有实例都一起进入 "loading" 状态（或者更确切地说，它们都更新以报告单例状态）。

当在任何其他原因导致重新验证正在进行时调用 revalidate() 时，会自动处理竞争条件。

如果在重新验证进行中发生导航，则重新验证将被取消，并且将从下一页的所有加载程序中请求新的数据。