EDITAR (22 de junio de 2020): como esta pregunta tiene un interés renovado, me doy cuenta de que puede haber algunos puntos de confusión. Entonces me gustaría resaltar: el ejemplo en la pregunta pretende ser un ejemplo de juguete. No es un reflejo del problema. El problema que provocó esta pregunta está en el uso de una biblioteca de terceros (sobre la cual hay un control limitado) que toma una devolución de llamada como argumento para una función. ¿Cuál es la forma correcta de proporcionar esa devolución de llamada con el estado más reciente? En las clases de reacción, esto se haría mediante el uso de this . En los ganchos de React, debido a la forma en que el estado se encapsula en las funciones de React.useState() , si una devolución de llamada obtiene el estado a través React.useState() , será obsoleto (el valor cuando se configuró la devolución de llamada). Pero si establece el estado, tendrá acceso al último estado a través del argumento pasado. Esto significa que potencialmente podemos obtener el estado más reciente en una devolución de llamada de este tipo con ganchos React configurando el estado para que sea el mismo que antes. Esto funciona, pero es contrario a la intuición.
-- La pregunta original continúa a continuación --
Estoy usando ganchos React e intento leer el estado desde una devolución de llamada. Cada vez que la devolución de llamada accede a él, vuelve a su valor predeterminado.
Con el siguiente código. La consola seguirá imprimiendo Count is: 0 sin importar cuántas veces haga clic.
function Card(title) { const [count, setCount] = React.useState(0) const [callbackSetup, setCallbackSetup] = React.useState(false) function setupConsoleCallback(callback) { console.log("Setting up callback") setInterval(callback, 3000) } function clickHandler() { setCount(count+1); if (!callbackSetup) { setupConsoleCallback(() => {console.log(`Count is: ${count}`)}) setCallbackSetup(true) } } return (<div> Active count {count} <br/> <button onClick={clickHandler}>Increment</button> </div>); } const el = document.querySelector("#root"); ReactDOM.render(<Card title='Example Component' />, el);Puedes encontrar este código aquí
No he tenido problemas para establecer el estado dentro de una devolución de llamada, solo para acceder al estado más reciente.
Si tuviera que adivinar, pensaría que cualquier cambio de estado crea una nueva instancia de la función Tarjeta. Y que la devolución de llamada se refiere a la anterior. Según la documentación en https://reactjs.org/docs/hooks-reference.html#function-updates , tuve la idea de adoptar el enfoque de llamar a setState en la devolución de llamada y pasar una función a setState, para ver si Podría acceder al estado actual desde setState. reemplazando
setupConsoleCallback(() => {console.log(`Count is: ${count}`)})con
setupConsoleCallback(() => {setCount(prevCount => {console.log(`Count is: ${prevCount}`); return prevCount})})Puedes encontrar este código aquí
Ese enfoque tampoco ha funcionado. EDITAR: En realidad, ese segundo enfoque funciona . Acabo de tener un error tipográfico en mi devolución de llamada. Este es el enfoque correcto. Necesito llamar a setState para acceder al estado anterior. A pesar de que no tengo intención de establecer el estado.
Siento que he tomado enfoques similares con las clases React, pero. Para mantener la coherencia del código, debo seguir con React Effects.
¿Cómo puedo acceder a la información de estado más reciente desde una devolución de llamada?
Para su escenario (donde no puede seguir creando nuevas devoluciones de llamada y pasándolas a su biblioteca de terceros), puede usar useRef para mantener un objeto mutable con el estado actual. Al igual que:
function Card(title) { const [count, setCount] = React.useState(0) const [callbackSetup, setCallbackSetup] = React.useState(false) const stateRef = useRef(); // make stateRef always have the current count // your "fixed" callbacks can refer to this object whenever // they need the current value. Note: the callbacks will not // be reactive - they will not re-run the instant state changes, // but they *will* see the current value whenever they do run stateRef.current = count; function setupConsoleCallback(callback) { console.log("Setting up callback") setInterval(callback, 3000) } function clickHandler() { setCount(count+1); if (!callbackSetup) { setupConsoleCallback(() => {console.log(`Count is: ${stateRef.current}`)}) setCallbackSetup(true) } } return (<div> Active count {count} <br/> <button onClick={clickHandler}>Increment</button> </div>); }Su devolución de llamada puede hacer referencia al objeto mutable para "leer" el estado actual. Capturará el objeto mutable en su cierre, y cada renderización del objeto mutable se actualizará con el valor del estado actual.
Utilice el módulo NPM react-usestateref para obtener siempre el último valor de estado. Es totalmente compatible con versiones anteriores de React useState API.
Ejemplo de código de cómo usarlo:
import useState from 'react-usestateref'; const [count, setCount, counterRef] = useState(0); console.log(couterRef.current); // it will always have the latest state value setCount(20); console.log(counterRef.current); El paquete NPM react-useStateRef le permite acceder al estado más reciente (como ref ), mediante useState .
Para resolver exactamente este problema, he creado un módulo de reacción para eso. react-usestateref (Reaccionar useStateRef). Por ejemplo, de uso:
var [state, setState, ref] = useState(0); Funciona exactamente como useState pero además, te da el estado actual en ref.current
Aprende más:
Puede obtener el valor más reciente utilizando setState
Por ejemplo:
var [state, setState] = useState(defaultValue); useEffect(() => { var updatedState; setState(currentState => { // Do not change the state by getting the updated state updateState = currentState; return currentState; }) alert(updateState); // the current state. })