javascript - 如何删除所有数据并使用useEffect在不刷新的情况下更新页面

Question

我正在尝试使用带有事件处理程序的“全部删除”按钮删除 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 });
        }
    });
});

Answer 1

关于后端的一些建议:

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([])
}

祝你好运!)