Necesito encontrar una manera de usar una variable declarada dentro de un componente funcional y parte de los accesorios del componente funcional dentro de la función de devolución de llamada en un detector de eventos mousemove.
Hasta ahora tengo el código a continuación, pero parece que los accesorios no se actualizan dentro de la función onHover.
El componente completo es un poco más complejo que este código de ejemplo, pero el siguiente ejemplo es la forma más básica de mostrar mi problema. En la inicialización, el valor en los accesorios sería 1, y en la función onHover permanece en 1 incluso si hay un cambio y se vuelve a renderizar y en otra parte del componente muestra el valor correcto de 2.
¿Hay alguna manera de asegurarse de que la función onHover haga referencia a la versión más reciente de los accesorios?
Intenté usar un gancho useEffect para eliminar y agregar el eventlistener, pero parece que no puedo acceder a la variableNeededInOnHover NeededInOnHover
function FunctionalComp(props){ let variableNeededInOnHover = null; useEffect(()=>{ window.addEventListener("mousemove", onHover, true) return () => { window.removeEventListener("mousemove", onHover, true) } }, []) function onHover(event) { console.log(props.value) // stays 1 console.log(variableNeededInOnHover) } return ( <div>{props.value}</div> ) // Updates to show a value of 2 }¿Hay alguna manera de resolver este problema?
EDITAR:
Probé la solución propuesta por Taxel y parece que la variableNeededInOnHover mantiene su valor nulo a pesar de que configuré su valor en el gancho useEffect , imitando el método de ciclo de vida del componenteDidMount().
function FunctionalComp(props){ let variableNeededInOnHover = null; useEffect(()=>{ variableNeededInOnHover = "Non Null Value"; }, []) useEffect(()=>{ window.addEventListener("mousemove", onHover, true) return () => { window.removeEventListener("mousemove", onHover, true) } }, [props.value]) function onHover(event) { console.log(props.value) // stays 1 console.log(variableNeededInOnHover) } return ( <div>{props.value}</div> ) // Updates to show a value of 2 }No estoy 100% seguro de que esto resuelva su problema, ya que no tiene forma de que props.value se actualice en el ejemplo. Por lo general, debe usar el estado Reaccionar para cualquier valor que se cambiará y desea provocar una nueva representación. React no sabrá acerca de un let que se actualiza en alguna parte.
He agregado un ejemplo a continuación que muestra el valor que se actualiza.
function FunctionalComp(props){ const [value, setValue] = React.useState(props.value); React.useEffect(()=>{ setValue(oldValue => oldValue + 1); }, []) React.useEffect(()=>{ window.addEventListener("mousemove", onHover, true) return () => { window.removeEventListener("mousemove", onHover, true) } }, [value]) function onHover(event) { console.log(value) // stays 1 } return ( <div>{value}</div> ) // Updates to show a value of 2 } ReactDOM.render( <FunctionalComp value={1} />, document.getElementById("react") ); <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="react"></div>