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 }); } }); });
Algunas sugerencias con respecto al backend:
router.delete("/", (req, res) => { Item.deleteMany({}, (err) => { if (err) { response.status(500); } else { (res) => res.json({ success: true }); } }); });
Debería ser res.status(500)
en lugar de response.status(500)
Verifique su ruta, esta parece ser incorrecta, pruebe /itmes
o tal vez /api/items
(res) => res.json({ success: true });
esta parte también parece incorrecta, debería ser:
else { res.json({ success: true }); // or res.json([]) }
¡Buena suerte!)
Se llama a su handleDelete cuando fetchList agrega los datos a los elementos.
Puedes hacerlo así: Crear un nuevo estado
const [deleteAll, setDeleteAll] = useState(false);
Cambia tu botón a:
<button className={styles.delete_all} onClick={() => setDeleteAll(true)}>Delete All</button>
y cambia tu efecto de uso
useEffect(() => { handleDelete(); console.log("handleDelete activate") }, [deleteAll == true])