Tengo una función, que se ejecuta con cada cambio de un formulario de entrada. Cambia una variable de estado ( foo , bar ) y ejecuta una función ( _validate() ) que a su vez se basa en foo y bar para establecer otra variable de estado, valid .
const [foo, setFoo] = useState(null);
const [bar, setBar] = useState(null);
const [valid, setValid] = useState(false);
...
const _validate = () => {
console.log(foo); // this renders previous value
console.log(bar); // this renders previous value
if(foo.length !== 0) {
setValid(true);
} else {
setValid(false);
}
}
const _onChange = (origin, val) => {
if(origin === 'sth') {
setFoo(val);
_validate();
if(valid) {
// do sth
}
} else {
setBar(val);
_validate();
if(valid) {
// do sth
}
}
...
}
console.log(foo, bar); // this renders current value
render() {
...
}
Si hago un console.log() en validate() , las variables de estado foo y bar no son las actuales, que se establecen después de llamar a _onChange() . Son los viejos, anteriores. Solo después de ejecutar _onChange() nuevamente, el valor se actualiza. Pero no con el actual, sino con el anterior, que hubiera esperado después del primer _onChange() . Tenga en cuenta que el console.log(foo, bar); justo antes de que el procesamiento registre los valores actuales esperados. Entonces hay un retraso de "one _onChange() en las variables de estado foo y bar en validate() .
Cuál podría ser la razón para eso?
Esta parte no está bien:
setFoo(val); // setFoo will not change the `foo` until the next render.
_validate();
¿Puedes pasar los valores directamente a la función _validate ?
const _validate = (foo, bar) => {
console.log(foo); // this renders previous value
console.log(bar); // this renders previous value
if(foo.length !== 0) {
setValid(true);
} else {
setValid(false);
}
}
Luego pase los valores con _validate(foo, bar); .
Otro enfoque sería poner la función de validación en un efecto:
useEffect(() => {
if(foo.length !== 0) {
setValid(true);
} else {
setValid(false);
}
}
}, [foo, bar]);