由于正常数据突变之外的原因(如Window
焦点或按时间间隔轮询),重新验证页面上的数据。
请注意,页面数据在操作后已经自动重新验证。如果您发现自己为了响应用户交互而对数据进行正常的 CRUD 操作而使用此功能,那么您可能没有利用其他 API,如useFetcher
、Form
、useSubmit
,这些 API 会自动执行此操作。
import { useRevalidator } from "react-router";
function WindowFocusRevalidator() {
const revalidator = useRevalidator();
useFakeWindowFocus(() => {
revalidator.revalidate();
});
return (
<div hidden={revalidator.state === "idle"}>
Revalidating...
</div>
);
}
function useRevalidator(): {
revalidate: () => Promise<void>;
state: DataRouter["state"]["revalidation"];
}
一个包含 revalidate
函数和当前重新验证 state
的对象。