Reactjs 当其中一个依赖项是useContext中的函数时，useEffect中的InfiniteLop

我已经挣扎了很长一段时间，没有找到答案

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

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

  const { sendDataToServer } = useContext(context)

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

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

当然，我可以重新设计应用程序，并且不在上下文中保持功能，但我确实喜欢它，并且不认为它是坏的实践（如果我错了，请改正）< /P>

---

那么我有什么选择呢？如何在上下文中保持流，但在正确的依赖项列表中使用useEffect

你的猜测是对的，这就是为什么我们需要引用平等

您没有发布

sendDataToServer

函数，但在

useCallback

中应该是这样的：

const sendDataToServer=useCallback（数据=>{
//您的实现
}，[您的依赖项]）

之后，您可以安全地使用它在您的使用效果

我强烈推荐Kent C.Dodd的博客帖子：

Smartassing now：如果它的唯一目的是向服务器发送数据（而不是更改应用程序的状态），我不知道为什么它应该成为上下文的一部分。它可以是一个自定义钩子，甚至可以是一个静态函数

---

顺便说一句：可能还有另一个问题：如果在执行

sendDataToServer

时，

useEffect

中的

data

依赖项发生了变化，那么您仍然会有一个无休止的循环（例如，当您在执行

sendDataToServer

后获取新数据时），但我们看不到代码的其余部分。

sendData类似于：1。调度装载，2。axios柱3。调度成功。我尝试在组件本身中使用回调，所以useEffect将调用send=useCallback（sendData），但到目前为止这没有多大意义。我会试试你的解决方案，谢谢！有趣的是，它在大多数情况下都能工作，但如果我有来自状态的依赖关系，比如状态：加载、成功、错误，那么它当然会进入无限循环。所以我不太清楚最好的模式是什么，我想保留操作状态的函数作为提供程序的一部分，但我无法将它们完美地导入组件中，就像catch-22一样通常我有一个自定义的钩子来访问应用程序中的数据（比如

useStatuses

），它从上下文（或者远程获取）中获取数据. 关于如何构建您的上下文，我强烈推荐Kent C.Dodds的文章：……而且，为了使用React简化远程数据，我还强烈推荐“React Query”，即a）获取和b）缓存数据，因此您无需在React上下文中为您的服务器数据执行此操作：