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

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

0 голосов
/ 03 августа 2020

Мой компонент отображает таблицу с пользователями. Пользователи загружаются (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])

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

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

1 Ответ

0 голосов
/ 03 августа 2020 
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])

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

...