Sé que useState hook of react es asíncrono, por lo que si uso useState para almacenar variables y llamar a la función de conjunto, es posible que no se actualice al instante.
Sin embargo, ahora estoy usando variables simples para almacenar el valor, pero aún así el valor de la variable no se actualiza. ¿Cómo puedo resolver lo mismo?
const List=(props)=>{ let count = 1; const onNextButtonClick = ()=>{ count = count +1; console.log(count ); updatePage(); } return ( //html ) }Veo que el valor de c no se incrementa cada vez que se hace clic en el siguiente botón y obtengo el mismo valor de c en la consola.
¿Por qué está pasando esto?
count debe almacenarse en estado y, debido a que las actualizaciones de estado pueden agruparse y procesarse de forma asíncrona, no verá el cambio hasta el próximo procesamiento, que es donde useEffect resulta útil.
const { useEffect, useState } = React; function Example() { const [ count, setCount ] = useState(0); function onNextButtonClick() { setCount(count + 1); // the other thing } useEffect(() => { if (count) console.log(count); }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={onNextButtonClick}> Click me </button> </div> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>