Uso de la casilla de verificación React y Material UI
Estoy tratando de que una casilla de verificación represente un cambio de estado en un valor específico cuando está marcada.
Todo funciona correctamente, sin embargo, solo en los primeros 2 clics de la casilla de verificación, el estado no se actualiza correctamente
const [waterChecked, setWaterChecked] = React.useState(true); const [data, setData] = useState(null); const handleChangeWater = (event) => { setWaterChecked(event.target.checked); if (waterChecked) { setData([1, 2, 3, 4]) } else if (!waterChecked) { setData([]) } }; <ul> <Checkbox waterChecked={waterChecked} onChange={handleChangeWater} defaultChecked={false} inputProps={{ 'aria-label': 'controlled' }} /> Water </ul>Poner un console.log (waterChcked) dentro de mi función handleChangeWater otorga estos resultados. Después de 5 clics obtengo:
cierto, cierto, falso, cierto, falso
Funciona exactamente como se esperaba después de los primeros 2 clics, el único problema es que el orden se invierte debido al doble verdadero al principio.
por ejemplo, 7 clics de las salidas de la casilla de verificación
cierto, cierto, falso, verdadero, falso, cierto, falso
etc..
Cualquier consejo sería muy apreciado, soy nuevo en reaccionar, así que disculpe cualquier problema de sintaxis.
¡Gracias!
setWaterChecked(event.target.checked) establece el estado waterChecked de forma asíncrona. Por lo tanto, no puede usarlo para establecer el estado de los data después. Por lo tanto, use el valor event.target.checked para establecer el estado de los data de la siguiente manera.
const [waterChecked, setWaterChecked] = React.useState(true); const [data, setData] = useState(null); const handleChangeWater = (event) => { const checked = event.target.checked; setWaterChecked(checked); if (checked) { setData([1, 2, 3, 4]); } else { setData([]); } }; <ul> <Checkbox waterChecked={waterChecked} onChange={handleChangeWater} defaultChecked={false} inputProps={{ "aria-label": "controlled" }} /> Water </ul>; O puede usar useEffect para realizar un seguimiento del estado de waterChecked y hacer los cambios necesarios en el estado de los data de la siguiente manera.
const [waterChecked, setWaterChecked] = React.useState(true); const [data, setData] = useState(null); const handleChangeWater = (event) => { setWaterChecked(event.target.checked); }; useEffect(() => { if (waterChecked) { setData([1, 2, 3, 4]); } else { setData([]); } }, [waterChecked]); <ul> <Checkbox waterChecked={waterChecked} onChange={handleChangeWater} defaultChecked={false} inputProps={{ "aria-label": "controlled" }} /> Water </ul>;