我正在尝试使用带有事件处理程序的“全部删除”按钮删除 API 中的所有数据,它调用异步函数将我的 items
设置为空数组。这样做时,我希望它在每次单击按钮时更新我的页面并更新页面数据而不使用 useEffect
刷新页面。但是,仅当我刷新页面时页面才会更新(行为类似于 componentDidMount()
)。经过一些研究,我意识到在数组参数的 useEffect
Hook 中添加 items
会告诉 DOM 重新呈现,只有当 items
发生变化时。然而,经过一些调试后,我意识到每次刷新页面时都会调用 handleDelete
函数,这是我不希望它做的事情。我已经搜索并发现了很多关于这个问题的问题,但没有答案可以解决我的问题。有办法绕过它吗?我希望页面仅在我单击删除按钮时更新,仅此而已。
这是我的代码
export default function Dashboard() {
const [items, setItems] = useState([]);
const fetchList = async () => {
await axios.get("/api/items").then((res) => {
setItems(res.data.reverse());
});
};
const handleDelete = () =>{
axios.delete("/api/items").then((res)=>{
setItems(res.data);
console.log('-- res.data --', res.data)
})
}
useEffect(() => {
fetchList();
console.log("fetchList activate")
}, []);
return (
<div className={styles.dashboard_container}>
<button className={styles.delete_all} onClick={handleDelete}>Delete All</button>
{items.map((item) => {
const { _id, name, phone, numberofpeople, time } = item;
return (
<div className={styles.waitlist_item} key={_id}>
<h4>{name}</h4>
<h5>{phone}</h5>
<h4>{numberofpeople}</h4>
<h5>{moment(time).format("MMM Do, h:mm:ss A ddd")}</h5>
</div>
);
...
这是我的后端路由器中处理删除请求的代码。
router.delete("/api/items", (req, res) => {
Item.deleteMany({}, (err) => {
if (err) {
res.status(500);
} else {
res.json({ success: true });
}
});
});
最佳答案
关于后端的一些建议:
router.delete("/", (req, res) => {
Item.deleteMany({}, (err) => {
if (err) {
response.status(500);
} else {
(res) => res.json({ success: true });
}
});
});
应该是 res.status(500)
而不是 response.status(500)
检查你的路线,这个好像不对,试试/itmes
或者/api/items
(res) => res.json({ success: true });
这部分好像也不对,应该是:
else {
res.json({ success: true }); // or res.json([])
}
祝你好运!)
关于javascript - 如何删除所有数据并使用useEffect在不刷新的情况下更新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69306452/