Tengo algunas casillas de verificación, todas las opciones marcadas se envían al servidor como una matriz, el problema es que desmarcar no funciona, así que después de marcar una, incluso si desmarca, se envía al servidor, y si marca y desmarca varias veces se enviará el mismo valor muchas veces, aquí está el código.
const [time, setTime] = useState([]); function handleChangeTime(e) { if (e.currentTarget.checked) { setTime([...time, e.target.value]); } else { const newArray = setTime.filter((item) => item !== e.target.value); setTime(newArray); } } console.log(time) <h4>Select the best time:</h4> <form> <label> <input type="checkbox" name="time" onChange={handleChangeTime} value="9:00" /> 9:00 am </label> <label> <input type="checkbox" name="time" onChange={handleChangeTime} value="9:30" /> 9:30 am </label> <label> <input type="checkbox" name="time" onChange={handleChangeTime} value="10:00" /> 10:00 am </label> </form>¡Gracias a todos de antemano por la ayuda!
Para actualizar el estado en función de su valor anterior, utilice el formulario de actualización funcional ...
Si el nuevo estado se calcula utilizando el estado anterior, puede pasar una función a
setState. La función recibirá el valor anterior y devolverá un valor actualizado.
function handleChangeTime({ target: { checked, value } }) { if (checked) { setTime((prev) => [...prev, value]); } else { setTime((prev) => prev.filter((item) => item !== value)); } }