useRevalidator

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 等自动执行此操作的 API。

特性

revalidator.state

重新验证的状态。空闲或正在加载。

revalidator.revalidate()

启动重新验证。

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

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

Notes

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

当重新验证由于任何其他原因已经在进行中时，调用 revalidate() 会自动处理竞争条件。

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