React-native：卸载屏幕时停止自动重新获取

Question

我正在使用 React-native 和 React-query，我想在屏幕卸载时停止自动重新获取。

目前，当我转到目标屏幕时，我会调用一个带有间隔参数的查询：

const { data: mission } = useMissionFetcher(missionSelectedId, 5000)

使用任务获取器：

export const useMissionFetcher = (idMission: string, interval: number): QueryResult<MissionMobile> => {
    const missionsQueryFn = () => getMission(idMission)
        return useQuery([QueryKeys.mission, idMission], missionsQueryFn, {
          ...baseReactQueryConfig,
          refetchInterval: interval,
        })
  }

基础反应查询配置：

export const baseReactQueryConfig = {
    refetchOnWindowFocus: false,
    staleTime: Infinity,

退出屏幕时如何停止重新获取？

Answer 1

在 react-native 中管理焦点重新获取是不同的。道具 refetchOnWindowFocus 依赖于 window，后者仅限于网络。

您正在寻找的是 AppState - 这就是 React Native 管理屏幕 active/inactive 状态的方式。

因此，您可以通过处理这些事件来更改 react-query 重新获取的行为。此处参考：https://react-query.tanstack.com/guides/window-focus-refetching#managing-focus-in-react-native

Answer 2

我认为您使用导航离开当前屏幕，但不会卸载屏幕。使用 navigation.replace 并且您的反应查询重新获取将自动停止，因为它将被垃圾化（或者如果您愿意，可以卸载）

Answer 3

以防万一你只想在聚焦屏幕时重新获取，因为很多人都想这样做我想你可以使用这个钩子

export const useRefetchOnFocus = (refetch = () => {}, canRefetch = true) => {
  const [isScreenFocused, setIsScreenFocused] = useState(false);
  useFocusEffect(() => {
    setIsScreenFocused(true); // when i focus the screen
    return () => setIsScreenFocused(false); // when i quit the screen
  });

  /* the screen still always active in cache so we need to check that the screen is focused in a use effect
  to dispatch the refetch only one time to avoid the infinity loop*/
  useEffect(() => {
    if (isScreenFocused && canRefetch) {
      refetch();
    }
  }, [canRefetch, isScreenFocused, refetch]);
};

并在您的屏幕上

  const { data, refetch } = useAccount();

  useRefetchOnFocus(refetch);

React-native：卸载屏幕时停止自动重新获取

React-native : Stop an automatic refetch when screen is unmounted

react-native

react-query