React - useEffect() 中的错误。 dat 是不是会使页面上的所有内容陷入无限循环？

Posted 2023-02-23

【中文标题】React - useEffect() 中的错误。 dat 是不是会使页面上的所有内容陷入无限循环？

【英文标题】：React - error in useEffect(). does dat make everything on page go in infinite loop?React - useEffect() 中的错误。 dat 是否会使页面上的所有内容陷入无限循环？

【发布时间】：2020-07-31 07:10:49

【问题描述】：

我已将我的所有类组件转换为功能组件。现在，当我在开发过程中更改 IDE 中的一些代码时，我的页面会进入无限循环。我几乎可以肯定我的useEffect() 钩子上有一个错误（或缺失）条件触发变量。但要弄清楚是哪一个需要一些时间。

所以，我的问题是。有没有一种简单的方法可以找出哪个坏了会导致循环。它还会在构建后循环，还是仅在开发中循环？

根据要求提供代码示例。这是非常基本的，因为我有大约 20 个使用这个原理。

import React, useEffect from "react";

const Layout = ( data ) => 
  useEffect(() => 
    // some jQuery stuff
  , [data.myConditionalVar])

  return (
    <div>
     // my stuff
    </div>
  )

【问题讨论】：

如果您向我们展示代码，那么我们也许能够发现无限循环的来源。如果您真的不知道可以在代码中插入断点并单步执行。

@RobinZigmond 是的，我添加了一些基本代码。我无法向您展示所有内容，因为这将是一个完整的网站 :) 而且我不知道是什么破坏了它。但我想我会先玩破点

useEffect 的无限更新最终导致maximum update depth exceeded 错误，并带有可用于确定原因的堆栈跟踪。你确定你在开发模式下运行 react 吗？

好吧，我没有得到这样的反馈。我在开发模式下运行我的 Gatsby.js 项目。所以我会假设我是。这也可能意味着useEffect 可能不是循环的来源？

【参考方案1】：

useEffect 每次你传递的第二个参数改变时都会被调用。在您的情况下，它是data.myConditionalVar。

所以，我假设在 useEffect 内部，您正在使用 jquery 更新 data，这会强制 React 再次调用 useEffect，从而导致永无止境的循环。