Question

我在 react 应用程序中使用过这个，但我正在将项目移植到 next.js 并且由于某种原因它不起作用。我正在使用 SWR

自定义钩子：

import axios from "axios";
import useSwr from "swr";

export const useHttp = (url, token) => {
  const fetcher = (url, token) =>
    axios
      .get(url, { headers: { Authorization: "Bearer " + token } })
      .then((res) => res.data);
  const { data, error } = useSwr(token ? [url, token] : null, fetcher);

  return {
    data: data,
    isLoading: !error && !data,
    isError: error,
  };
};

在我的页面

  const { data, isError, isLoading } = useHttp(
    `http://localhost:8000/api/admin/bookings/${id}`,
    session.user.servertoken
  );


  const deleteBooking = async (id) => {
    //immediatly remove record from the screen before getting response from the server
    mutate(
      [
        `http://localhost:8000/api/admin/bookings/${id}`,
        session.user.servertoken,
      ],
      data.filter((d) => d._id !== id),
      false
    );
    try {
       const response = await axios.delete(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/admin/bookings/${id}`,
        { headers: { Authorization: "Bearer " + session.user.servertoken } }
       );
      mutate([
        `http://localhost:8000/api/admin/bookings/${id}`,
        session.user.servertoken,
      ]);
    } catch (err) {
      console.log(err);
    }
  };

按钮：

<Button
  variant="danger"
  onClick={() => deleteBooking(d._id)}
>
  Delete
</Button>

虽然在 ui 方面绝对没有发生任何事情（记录在数据库中被删除）。单击删除并运行 deleteBooking 功能后，该记录应从屏幕上消失。

*如果我将其添加到我的 deleteBooking 函数中，它会显示正确的数据：

const filteredData = data.filter((d) => d._id !== id);

删除后从屏幕上删除项目

0 个答案: