Tengo un caso de uso bastante básico: quiero obtener la información del usuario del servidor cuando se carga la aplicación y luego usar un gancho para obtener la información en diferentes componentes.

Por alguna razón, me encuentro con un bucle infinito y obtengo un Error: Maximum update depth exceeded. getMe recibe una llamada recursiva hasta que la aplicación se bloquea. ¿Es ese un comportamiento correcto de gancho?

Esta es la parte relevante del gancho:

 export default function useUser () { const [user, setUser] = useState(null) const [authenticating, setAuthenticating] = useState(true) // ... const getMe = (jwt) ={amp}gt; { console.log('set user') axios.get(baseURL   endpoints.currentUser, { headers: { 'X-Access-Token': jwt, 'Content-Type': 'application/json' }}).then(response ={amp}gt; { setUser({ name: response.data.name, img: response.data.avatar_url }) }) } useEffect(() ={amp}gt; { getMe(jwt) }, []) return { user, authenticating } } 

Esta es la primera llamada

 function App () { const { user, authenticating } = useUser() const c = useStyles() return ( authenticating ? ( {amp}lt;div className={c.wrapper}{amp}gt; {amp}lt;Loader size={60}/{amp}gt; {amp}lt;/div{amp}gt; ) : ( {amp}lt;div className={c.wrapper}{amp}gt; {amp}lt;div className={c.sidebar}{amp}gt; {amp}lt;img className={c.lamp} src={ user ? user.img : lamp } /{amp}gt; 

Y también llamo necesito al usuario en el componente Router

 const Routes = () ={amp}gt; { const { user } = useUser() return ( {amp}lt;Router history={history}{amp}gt; {amp}lt;Switch{amp}gt; // ... {amp}lt;Route path={pages.login} render={routeProps ={amp}gt; ( user ? {amp}lt;Redirect to={pages.main}/{amp}gt; : {amp}lt;Login {...routeProps}/{amp}gt; )} /{amp}gt; 

No debería solicitar el servidor cada vez que llame al gancho, ya que es innecesario. Puede usar Redux o contexto para esto (para este paradigma redux sería mejor). Sin embargo, si insiste en este método, parece que tiene que ajustar su función getMe en un useCallback ya que debe volver a representarse cada vez que se ejecuta la función.

Lea más sobre el gancho useCallback :

https://reactjs.org/docs/hooks-reference.html#usecallback

Jose felix

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.