Todavía estoy pensando en los ganchos de reacción, pero me cuesta ver qué estoy haciendo mal aquí. Tengo un componente para cambiar el tamaño de los paneles, al bajar el onmousedown de un borde, actualizo un valor en el estado y luego tengo un controlador de eventos para mousemove que usa este valor, sin embargo, no parece actualizarse después de que el valor ha cambiado.
Aquí está mi código:
export default memo(() => { const [activePoint, setActivePoint] = useState(null); // initial is null const handleResize = () => { console.log(activePoint); // is null but should be 'top|bottom|left|right' }; const resizerMouseDown = (e, point) => { setActivePoint(point); // setting state as 'top|bottom|left|right' window.addEventListener('mousemove', handleResize); window.addEventListener('mouseup', cleanup); // removed for clarity }; return ( <div className="interfaceResizeHandler"> {resizePoints.map(point => ( <div key={ point } className={ `interfaceResizeHandler__resizer interfaceResizeHandler__resizer--${ point }` } onMouseDown={ e => resizerMouseDown(e, point) } /> ))} </div> ); }); El problema es con la función handleResize , que debería usar la última versión de activePoint , que sería una cadena top|left|bottom|right pero en cambio es null .
useRef para leer el valor futuro Actualmente, su problema es que está leyendo un valor del pasado. Cuando define handleResize , pertenece a ese renderizado, por lo tanto, cuando vuelve a renderizar, no le sucede nada al detector de eventos, por lo que aún lee el valor anterior de su renderizado.
Para solucionar esto, debe usar una referencia a través useRef que mantiene actualizada para que pueda leer el valor actual.
const [activePoint, _setActivePoint] = React.useState(null); // define a ref const activePointRef = React.useRef(activePoint); // in place of original `setActivePoint` const setActivePoint = x => { activePointRef.current = x; // keep updated _setActivePoint(x); }; const handleResize = () => { // now when reading `activePointRef.current` you'll // have access to the current state console.log(activePointRef.current); }; const resizerMouseDown = /* still the same */; return /* return is still the same */Tiene acceso al estado actual desde la función de establecimiento, por lo que podría hacerlo:
const handleResize = () => { setActivePoint(activePoint => { console.log(activePoint); return activePoint; }) }; const [activePoint, setActivePoint] = useState(null); // initial is null const handleResize = () => { setActivePoint(currentActivePoint => { // call set method to get the value console.log(currentActivePoint); return currentActivePoint; // set the same value, so nothing will change // or a different value, depends on your use case }); };