useCallback devuelve n+1 veces donde n es el número de variables de estado.
Estoy tratando de configurar un menú contextual personalizado, sin embargo, cada vez que el usuario hace clic derecho, la función del menú contextual devuelve 6 veces diferentes, siendo la quinta lo que necesito y la sexta los valores predeterminados del estado. Sin embargo, si el usuario hace doble clic derecho en el mismo lugar, devuelve 5 veces, con la quinta devolución siendo los valores deseados y se abre el menú. ¿Existe alguna manera de verificar antes de la devolución si todos los estados han cambiado y devolver solo desde la devolución si toda la información necesaria está presente?
const ContextMenu = outerRef => {
const [xPos, setXPos] = useState(“0px”);
const [yPos, setYPos] = useState(“0px”);
const [menu, showMenu] = useState(false);
const [menuTarget, setMenuTarget] = useState(”);
const [menuTargetId, setMenuTargetId] = useState(”);
const handleContextMenu = useCallback(
event => {
if(event.target.className && (event.target.className.includes(‘bar’) || event.target.className == ‘timeline’ || event.target.className == ‘draggablediv’ || event.target.className == ‘editableDiv’)){
event.preventDefault();
if (outerRef && outerRef.current.contains(event.target)) {
setXPos(${event.pageX}px);
setYPos(${event.pageY}px);
setMenuTarget(event.target.className)
setMenuTargetId(event.target.id)
showMenu(true);
} else {
showMenu(false);
}
}
},[showMenu, outerRef, setXPos, setYPos]);
const handleClick = useCallback(() => {
showMenu(false);
}, [showMenu]);
useEffect(() => {
document.addEventListener(“click”, handleClick);
document.addEventListener(“contextmenu”, handleContextMenu);
return () => {
document.removeEventListener(“click”, handleClick);
document.removeEventListener(“contextmenu”, handleContextMenu);
};
}, []);
return {xPos, yPos, menu, menuTarget, menuTargetId};
};
davy.ai
Sí, puedes comprobar antes del retorno si todos los estados han cambiado y solo retornar desde el callback si toda la información necesaria está presente. Puedes usar el gancho
useEffectpara agregar un escucha de eventos para el eventocontextmenuy comprobar si toda la información necesaria está presente antes de retornar desde el callback. El fragmento de código a continuación muestra un ejemplo de cómo se puede hacer esto: