Sé que los ganchos no se pueden llamar desde funciones que no sean componentes funcionales de React, esto es un poco diferente.
He creado algunas funciones de tipo utilidad/servicio que necesitan usar ganchos.
// somewhere in services files... const utilNavTo = (route) => { const navigate = useNavigate(); ... }; // somewhere in components for screens... const MyScreen = () => { ... if(something){ utilNavTo('/somewhere'); } ... }; // the main app is created with <App /> not App, so that should not be the reason of error ReactDOM.render(<App />, document.getElementById("root")); // also App is fully defined with routes having <MyScreen /> defined properly...Cuando se usa una función de este tipo dentro de un componente funcional de React, aparece este error:
Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same appSi llamo al gancho desde el componente funcional de reacción y lo paso a la función de utilidad, funciona perfectamente bien.
¿Hay alguna forma de hacer que esto funcione sin pasar los ganchos como argumentos? Supongo que solo debería fallar si la función de utilidad en sí no se llama desde un componente funcional.
El problema aquí es que el código llama a useNavigate en una función de devolución de llamada, de forma condicional. Esto rompe las reglas de los ganchos :
No llame a Hooks dentro de bucles, condiciones o funciones anidadas. En su lugar, siempre use Hooks en el nivel superior de su función React, antes de cualquier retorno anticipado. Al seguir esta regla, te aseguras de que los ganchos se llamen en el mismo orden cada vez que se represente un componente.
Convierta el utilNavTo en un gancho React personalizado que devuelve una función para que la use un componente. El gancho debe llamarse en el cuerpo del componente de la función.
Ejemplo:
// somewhere in services files... const useUtilNavTo = () => { const navigate = useNavigate(); const utilNavTo = (route) => { ... }; return utilNavTo; };...
// somewhere in components for screens... const MyScreen = () => { const utilNavTo = useUtilNavTo(); ... if(something){ utilNavTo('/somewhere'); } ... };