reactjs - 当依赖之一是来自 useContext 的函数时，useEffect 中的 InfiniteLoop

Question

2021 年更新

使用发出请求并缓存它们的库 - react-query、swr、redux-toolkit-query

原始问题

我已经为此苦苦挣扎了很长时间，但没有找到答案。

我有一个组件，它是某些注册过程的最后一步，在此过程中我要求用户通过多个表单输入其数据。在这个组件中，我将收集的数据发送到 API。如果请求成功，我显示 ok，如果不成功，我显示错误。

我有发送数据的 useEffect。执行此任务的功能存在于上下文中

  const { sendDataToServer } = useContext(context)

  useEffect(() => {
    const sendData = async () => {
      setLoading(true)
      await sendDataToServer(...data)
      setLoading(false)
    }
    sendData()
  }, [sendDataToServer, data])

如果我在依赖项列表中包含 sendDataToServer，则此 useEffect 将进入无限循环，导致无休止的重新渲染。我想这是因为对函数的引用在每次渲染时都有不同的值。

我当然可以重新设计应用程序并且不保留上下文中的功能，但我确实喜欢它并且不认为这是一种不好的做法(如果我错了请纠正我)

那么我的选择是什么？如何保持上下文 API 的流程，同时使用具有正确依赖项列表的 useEffect？

Answer 1

你猜对了，这就是我们得到 useCallback 的原因引用平等。

您没有发布 sendDataToServer 函数，但它应该与 useCallback 类似:

const sendDataToServer = useCallback(data => {
    // your implementation
}, [your, dependencies])

之后，您就可以在 useEffect 中安全地使用它了。

我强烈推荐 Kent C. Dodd 的博文:When to useMemo and useCallback

Smartassing 现在:如果它的唯一目的是向服务器发送数据(而不是更改应用程序的状态)，我不知道为什么它应该成为上下文的一部分。它可以是自定义 Hook ，甚至是静态函数。

顺便说一句:可能还有另一个问题:如果在执行 sendDataToServer 时更改了 useEffect 中的 data 依赖项，您仍然会有一个无限循环(例如，当您在执行 sendDataToServer 后获取新数据时)，但我们看不到其余代码。