useEffect обновляет свою зависимость, вызывая бесконечный цикл

Мой компонент отображает таблицу с пользователями. Пользователи загружаются (getOverviewCitizensToday()) в состояние redux и передаются как компонент в качестве опоры (mapStateToProps). Чтобы запросить список пользователей, мне нужно указать offset (users.length), поэтому моему useEffect требуется users в качестве зависимости.

useEffect(() => {
    async function fetchData(): Promise<void> {
      const query: NewOverviewServiceUserQueryParameters = {
        offset: users.length,
        sort: transformSortingParams(sorting.order, sorting.orderBy) || undefined,
      }
      await getOverviewCitizensToday(query)
    }
    fetchData()
  }, [getOverviewCitizensToday, sorting.order, sorting.orderBy, users.length])

Это вызывает бесконечный цикл, потому что getOverviewCitizensToday() обновляет пользователей, что вызывает повторный запуск useEffect ...

Как лучше всего избежать этого бесконечного цикла?


reactjs react-hooks
person olefrank    schedule 03.08.2020    source источник
comment
Вы хотите, чтобы ваш эффект выполнялся только при монтировании компонента?   -  person Yousaf    schedule 03.08.2020
comment
почему у вас есть зависимость от fetchData в useEffect?   -  person Jonathan Akwetey Okine    schedule 03.08.2020
comment
Я хочу, чтобы эффект выполнялся каждый раз при изменении сортировки (order / orderBy). Это должно вызвать повторную выборку из api, которая обновляет users, что запускает повторную выборку ...   -  person olefrank    schedule 03.08.2020
comment
К сожалению, код @JonathanAkweteyOkine неверен, я его обновил   -  person olefrank    schedule 03.08.2020
comment
Вы можете опубликовать, как выглядит getOverviewCitizensToday?   -  person Yousaf    schedule 03.08.2020
comment
@olefrank, я не уверен, понимаю ли я ваш вопрос, но вы можете создать еще один useEffect, где вы можете использовать в качестве зависимости только ту переменную, которая должна запускать ваш useEffect.   -  person AskMen    schedule 03.08.2020
comment
@AskMen, можете ли вы опубликовать пример того, что вы имеете в виду? Я не понимаю, как я могу избежать указания пользователей как зависимых в useEffects   -  person olefrank    schedule 03.08.2020
comment
@olefrank, например, вам нужно получить пользователя в зависимости от users.length, поэтому вы можете создать: useEffect(() =>your code , [users.length]), также вы можете создать еще один useEffect(() =>your code , [admins.length]), где вы получите всех администраторов с сервера. Идея состоит в том, что не обязательно создавать только один useEffect() для всех асинхронных действий, вы можете разделить логику на разные функции.   -  person AskMen    schedule 03.08.2020
comment
@AskMen, но если fetchUsers () обновляет пользователей, я вхожу в бесконечный цикл useEffect(() => fetchUsers() , [users.length])   -  person olefrank    schedule 04.08.2020

Ответы (1)


arrow_upward
0
arrow_downward 

useEffect(() => {
    async function fetchData(): Promise<void> {
      console.log('fetch')

      const query: NewOverviewServiceUserQueryParameters = {
        offset: users.length,
        sort: transformSortingParams(sorting.order, sorting.orderBy) || undefined,
      }
      await getOverviewCitizensToday(query)
    }
    fetchData()

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sorting.order, sorting.orderBy])

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

person Justsolarry    schedule 03.08.2020
comment
Я хотел бы вместо этого научиться правильно использовать перехватчики реакции, но все равно спасибо ... - person olefrank; 03.08.2020