const Hello = () => { const [v, setV] = React.useState(1); React.useEffect(() => { setTimeout(async () => { await setV(2); doSomethingWithData(v) }, 3000) }, []); return ( <div> <h1>Hello, world {v}!</h1> </div> ); } const doSomethingWithData = (v) => { //report e-commerce data to our server here.. console.log('Variable value is: ' + v); } ReactDOM.render( <Hello />, document.getElementById('root') ); se está llamando a la función doSomethingWithData(v) con el valor incorrecto de la variable V . Eso es problemático porque se creará un registro en nuestra base de datos de comercio electrónico cuando se llame a doSomethingWithData() y, como resultado, podríamos tomar decisiones basadas en datos defectuosos. ¿Alguien puede explicar esto?
Lo siguiente no funciona como esperas. setV es asíncrono pero no devuelve una promesa de espera.
async () => { await setV(2); doSomethingWithData(v); }; El patrón general es usar el gancho useEffect con un valor de dependencia que es v en su caso.
React.useEffect(() => { setTimeout(() => { setV(2); }, 3000); }, []); React.useEffect(() => { doSomethingWithData(v); }, [v]);Si tiene los datos disponibles, simplemente páselos a doSomethingWithData.
React.useEffect(() => { setV(2); doSomethingWithData(2) }, []);La vista mostrará los datos del estado v y doSomethingWithData no estará detrás de un estado.