const [horizontal, setHorizontal] = useState(10); const [vertical, setVertical] = useState(10); const [blur, setBlur] = useState(10); const [spread, setSpread] = useState(10); const [color, setColor] = useState('#000000'); const [checked, setChecked] = useState(false); const onChangeHandler = (setFunction,event) => { if (setFunction === setChecked) { setFunction((prevVal) => !prevVal); } else { setFunction(event.target.value); } props.valuesInputHandler({ horizontal, vertical, blur, spread, color, checked }); }; <input type="checkbox" checked={checked} onChange={onChangeHandler.bind(this,setChecked)} />

La función onChangeHandler se ejecuta cuando hay algún cambio en el campo de entrada. Ahora supongamos que hice clic en una casilla de verificación, se ejecutará onChangeHandler. Como pasé la función setChecked como parámetro, la función setChecked convertirá el valor falso en verdadero. Después de eso, este valor se pasará al componente principal a través de la función props. Pero el problema es que cuando hago clic en la casilla de verificación, el estado marcado se actualiza, pero antes de actualizarse, el valor de marcado ya pasó. Entonces, si se vuelve verdadero, el componente principal aún tendrá el valor falso anterior. Y cuando vuelvo a hacer clic en la casilla de verificación, se vuelve falso, pero el componente principal obtiene el valor verdadero anterior esta vez. Está causando un retraso de un paso. ¿Cómo puedo pasar el valor de estado actualizado?