Busqué mucho antes de preguntar, pero parece que no puedo encontrar una solución que funcione conmigo.
Tengo una función a la que debo llamar después de que el estado se establezca en el nuevo valor.
const onClickCallback = () => { setState(..., setCallback()) } const setCallback = () => { console.log(State) // this prints the old State value if(State === something){ .... } }Aunque la función se llama como la devolución de llamada de setState, aún obtiene el valor anterior.
No estoy seguro si el problema es de mi parte o simplemente no es posible...
A diferencia de this.setState del componente de clase, la función de actualización de estado useState del componente de función no requiere un segundo argumento de devolución de llamada después de cualquier actualización de estado.
Lo que está haciendo es poner en cola una actualización de estado y pasar argumentos extraños, uno de los cuales es una función que está invocando de inmediato, y pasar cualquier valor de retorno a setState , que se ignorará.
setState(..., setCallback()) // setCallback invoked and result passed Use un useEffect con una dependencia del estado para registrar cualquier actualización de estado.
const onClickCallback = () => { setState(...); }; React.useEffect(() => { console.log(State) // this prints the updated state value if(state === something){ .... } }, [state, /* add other dependencies here */]); useEffect con la matriz de dependencias actúa como un equivalente de componentDidMount y componentDidUpdate . Es el ciclo de vida del componentDidUpdate que se usa anteriormente para "reaccionar" a la actualización de estado y desencadenar un efecto secundario.
Este asunto no tiene nada que ver con React, su enfoque habría provocado que la función setCallback() se ejecutara primero.
Edito tu código y el resultado de la demostración:
const onClickCallback = () => { // Here will run setCallback function before setState function. setState('...', setCallback()) } const setCallback = () => { console.info('run setCallback') } const setState = () => { console.info('run setState') } onClickCallback() Responda a su pregunta, puede usar useEffect para lograr sus objetivos.
Ejemplo sencillo:
const {useState, useEffect} = React; const DemoComponent = (props) => { const [state, setState] = useState('initialState') useEffect(() => { if (state === 'something') { console.info('state:' + state) } }, [state]) const onClickCallback = () => { setState('something') } return ( <div> <button onClick={onClickCallback}>Click</button> </div> ); } ReactDOM.render( <DemoComponent />, document.getElementById("root") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>