Actualmente tengo un problema con una aplicación React. Tengo un useEffect de alto nivel que no se llama. Tengo otro proyecto con un código similar y funciona en él. Normalmente, debería llamar a mi useEffect cada vez que hago una llamada HTTP desde mi aplicación, pero no pasa nada.

¿Alguien tiene idea de quién podría estar bloqueando?

De antemano muchas gracias por tu ayuda

Mi aplicación.js

 const App = () => ( <Provider store={store}> <AuthProvider> <QueryClientProvider client={QueryClient()}> <ConnectedRouter history={history}> <> <Header /> <AppNavigation /> <AuthModalError /> </> </ConnectedRouter> </QueryClientProvider> </AuthProvider> </Provider> );

Mi componente authProvider que se llama en app.js

 const AuthProvider = ({ children }) => { const [go, setGo] = useState(false); const token = "987646543216548789"; useAxiosToken(token); useEffect(() => { setGo(token !== undefined); }, [token]); if (!go) return null; console.log("Authenticated !! And now display application"); return <IdentityProvider value={token}>{children}</IdentityProvider>; }; AuthProvider.propTypes = { children: PropTypes.node }; export default AuthProvider;

Y finalmente el archivo que contiene el useEffect que no se activa.

 const removeTokenInterceptor = (id: number | null) => { if (id !== null) axios.interceptors.request.eject(id); }; const addTokenInterceptor = (token: string) => axios.interceptors.request.use((requestConfig) => ({ ...requestConfig, headers: { ...requestConfig.headers, Authorization: `${token}` }, })); const useAxiosToken = (token: string | undefined): void => { const interceptor = useRef<number | null>(null) useEffect(() => { if (token) { interceptor.current = addTokenInterceptor(token); } console.log("Call useEffect in useAxiosToken file"); return () => removeTokenInterceptor(interceptor.current); }, []); }; export default useAxiosToken;

pedro