reactjs - 删除后从屏幕上删除项目
问题描述
我有这个与反应应用程序一起使用,但我将项目移植到 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);
解决方案
推荐阅读
- formula - 如何根据经纬度计算偏移量
- python - 父类 self.__class__.__name__ 打印子类的名称
- javascript - 同一页面上的两个 Off Canvas 侧边栏
- javascript - 使用 laravel 和 vue.js 提交数据后显示消息
- c# - C# 从没有结束字符的网络流中读取
- sql - 左连接计数来自第二个表的三个属性
- r - 使用do.call将数据帧列表转换为具有多列的单个数据帧在R中的循环中不起作用
- javascript - 使javascript ip地址正则表达式拒绝数字0
- hardware - Epyc 2 是否具有与 DDIO 等效的功能?
- php - 如何更改a的顺序
带有 PHP 和 MySQL 的元素