Estoy tratando de eliminar todos mis datos en la API usando un botón "eliminar todo" con un controlador de eventos, donde llama a una función asíncrona para configurar mis items en una matriz vacía. Mientras hago eso, me gustaría actualizar mi página cada vez que hago clic en el botón y actualizar los datos de la página sin actualizar la página usando useEffect . Sin embargo, la página se actualiza solo cuando actualizo la página (se comporta como componentDidMount() ). Después de investigar un poco, me di cuenta de que agregar items en el gancho useEffect en el argumento de la matriz le indicaría a DOM que se volviera a procesar, solo cuando se cambiaran los items . Sin embargo, después de algunas depuraciones, me di cuenta de que se llama a la función handleDelete cada vez que actualizo la página, que es algo que no quiero que haga. He buscado y encontrado muchas preguntas sobre este tema, pero ninguna respuesta puede resolver mi problema. ¿Hay alguna forma de evitarlo? Me gustaría que la página se actualice solo cuando haga clic en el botón Eliminar y nada más.

Aquí está mi código

 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> ); ...

Aquí está el código en mi enrutador backend que se ocupa de la solicitud de eliminación.

 router.delete("/api/items", (req, res) => { Item.deleteMany({}, (err) => { if (err) { res.status(500); } else { res.json({ success: true }); } }); });