0

我有这个与反应应用程序一起使用，但我将项目移植到 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);
4

0 回答 0