Soy bastante nuevo en React, así que decidí hacer una aplicación para el cuidado de la piel para aprender la bestia. Por lo tanto, hice un formulario para registrar los productos, y este formulario contiene casillas de verificación. Mi problema es que, por mi vida, no puedo hacer que se restablezcan (¿vaciar?) después de enviar el formulario. Todas las respuestas que encontré eran demasiado antiguas o no funcionaban.

 //Frequency const [isDayChecked, setDayChecking] = useState([]); const dayFrequencyHandler = (event) => { const { value, checked } = event.target; // Case 1 : The user checks the box if (checked) { setDayChecking((checkedDays) => [...checkedDays, value]); } // Case 2 : The user unchecks the box else { setDayChecking(isDayChecked.filter((e) => e !== value)); } }; const [isNightChecked, setNightChecking] = useState([]); const nightFrequencyHandler = (event) => { const { value, checked } = event.target; // Case 1 : The user checks the box if (checked) { setNightChecking((checkedNights) => [...checkedNights, value]); } // Case 2 : The user unchecks the box else { setNightChecking(isNightChecked.filter((e) => e !== value)); } };

Como puede ver, estas casillas de verificación se utilizan para registrar con qué frecuencia se van a utilizar los productos (una casilla para la mañana y otra para la noche, para cada día de la semana). Luego, los datos se almacenan en la matriz vacía de useState(), o se eliminan cuando el usuario desmarca su casilla. Esa parte funciona bien.

Sin embargo, lo que no funciona bien es mi función de envío que se niega a borrar las casillas de verificación una vez que se llama. La solución más lógica para mí sería restablecer el estado de las casillas de verificación a su estado original, así:

 const submitHandler = (event) => { event.preventDefault(); setDayChecking([]); setNightChecking([]); };

React obviamente no está de acuerdo, ya que no funciona. Intenté usar el mismo código que cuando el usuario desmarca la casilla (sería algo como esto:

 setDayChecking(() => { const { value } = event.target; isDayChecked.filter((e) => e !== value); }); setNightChecking(() => { const { value } = event.target; isNightChecked.filter((e) => e !== value); });

) pero es aún peor.

¿Alguien tiene alguna idea de lo que estoy haciendo mal? ¡Gracias por adelantado!