У меня довольно простой вариант использования: я хочу получать информацию о пользователе с сервера при загрузке приложения, а затем использовать ловушку для получения информации о различных компонентах.

По какой-то причине я сталкиваюсь с бесконечным циклом и получаю сообщение Error: Maximum update depth exceeded. getMe рекурсивно, пока приложение не падает. Это правильное поведение крючка?

Это соответствующая часть крючка:

 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 } } 

Это первый звонок

 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; 

И я также называю нужным пользователя в компоненте 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; 

Вам не следует запрашивать сервер каждый раз, когда вы вызываете ловушку, так как это почти не нужно. Вы можете использовать Redux или контекст для этого (для этой парадигмы будет лучше использовать Redux). Однако, если вы настаиваете на этом методе, кажется, что вам нужно обернуть свою функцию getMe в useCallback так как она должна повторяться при каждом useCallback функции.

Читайте больше на крюке использования useCallback :

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

Хосе Феликс

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,