Question

我的组件显示一个带有用户的表。用户被加载（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重新运行...

避免这种无限循环的最佳方法是什么？

Answer 1

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对它正在使用的其他变量保持警惕。即使我知道这不是最佳做法，多余的注释也会删除警告。

useEffect更新了它自己的依赖性，导致无限循环

1 个答案: