在 React-query 中成功运行 mutation 后如何导航到另一个页面？

【问题标题】：How to navigate to another page after running mutation successfully in React-query?在 React-query 中成功运行 mutation 后如何导航到另一个页面？
【发布时间】：2023-01-25 18:18:59
【问题描述】：

当我在突变后重定向到另一个页面时，它显示内存泄漏警告。我尝试了很多方法，但我还没有找到任何解决方案。

警告是：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

【问题讨论】：

标签： javascript reactjs typescript react-query

【解决方案1】：

我们可以使用 useEffect 钩子在完成重新渲染后重定向到另一个页面。在这里我找到了一个使用自定义钩子的解决方案：

import { UseMutationResult } from '@tanstack/react-query';
import { useEffect } from 'react';
import { To, useNavigate } from 'react-router-dom';

export const useRedirectAfterMutation = <T, U>({
  mutation,
  navigateTo,
}: {
  mutation: UseMutationResult<T, Error, U, unknown>;
  navigateTo: To;
}) => {
  const navigate = useNavigate();

  useEffect(() => {
    if (mutation.isSuccess && !!navigateTo) {
      navigate(navigateTo);
    }
  }, [mutation.isSuccess, navigate, navigateTo]);

  return mutation.mutateAsync;
};

【讨论】：