`useRevalidator`

出于正常数据变更之外的原因（如窗口焦点或按时间间隔轮询），重新验证页面上的数据。

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

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

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

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

当调用 action 时，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() 时，会自动处理竞争条件。

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