如何使用 React Router 和 React Query 重定向到主页

Question

我有一个显示发票列表的应用程序。单击单个发票页面后，您可以选择删除该发票。单击删除后，会弹出一个确认删除的模式，然后发票会从列表中删除。

我正在使用 React Router 来导航应用程序中的页面，并使用 React Query 来处理 API 交互。

在下面的代码中，我尝试使用 useMutation 和 invalidateQueries 删除发票，以便更新发票列表，然后使用重定向重定向到列出所有发票的主页。

我遇到的问题是重定向似乎发生在查询失效之前，所以当我 return 到列表时，删除的项目仍然出现，直到您刷新页面。有什么解决办法吗？

import React, { useState } from "react";
import { useStore } from "../store";
import { deleteInvoice } from "../Api/ApiCalls";
import { useMutation, QueryClient } from "react-query";
import { Redirect } from "react-router-dom";

export default function DeleteModal({ id }) {
  const [redirect, setRedirect] = useState(false);
  const { setDeleteModal } = useStore();
  const queryClient = new QueryClient();

  const mutation = useMutation(deleteInvoice, {
    isSuccess: () => {
      queryClient.invalidateQueries("invoices");
    },
  });

const removeInvoice = () => {
    mutation.mutate(id)
    setRedirect(true)
}

  return (
    <div>
      <div className="delete-modal">
        <h1>Confirm Deletion</h1>
        <p>
          Are you sure you want to delete #{id}? This action cannot be undone
        </p>
        <button onClick={() => setDeleteModal(false)}>Cancel</button>
        <button onClick={() => removeInvoice()}>Delete</button>
        {redirect && <Redirect to="/" />}
      </div>
    </div>
  );
}

Answer 1

useMutation 挂钩 returns 您可以使用的一些布尔变量。

const mutation = useMutation(deleteInvoice, {
    onSuccess: () => {
      queryClient.invalidateQueries("invoices");
    },
  });

const removeInvoice = () => {
    mutation.mutate(id)
}

if (mutation.isSuccess) {
    return <Redirect to='/' />
}

return (
....
)

如何使用 React Router 和 React Query 重定向到主页

How to redirect to homepage using React Router and React Query

reactjs

react-router

react-router-dom

react-query