useEffect 更新它自己的依赖导致无限循环答案

【问题标题】：useEffect updates it's own dependency causing infinite loopuseEffect 更新它自己的依赖导致无限循环
【发布时间】：2020-11-23 12:02:41
【问题描述】：

我的组件显示一个包含用户的表格。用户被加载 (getOverviewCitizensToday()) 进入 redux 状态，并作为组件作为 prop (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 重新运行...

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

【问题讨论】：

你想让你的效果只在组件挂载上执行吗？
为什么在 useEffect 中有 fetchData 作为依赖项？
我希望每次排序（order/orderBy）改变时执行效果。这应该会触发从 api 重新获取更新 users 触发重新获取...
抱歉@JonathanAkweteyOkine 代码不正确，我已更新
你能发布getOverviewCitizensToday的样子吗？

标签： reactjs react-hooks

【解决方案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 对它正在使用的其他变量保持警惕。即使我知道这不是最佳做法，额外的评论也会删除警告。

【讨论】：

我想学习如何正确使用 react-hooks，不过还是谢谢...