当前位置: 首页 > 知识库问答 >
问题:

React钩子useEffect永远连续运行/无限循环

蒲德曜
2023-03-14

我正在尝试新的React Hooks的useEffectAPI,它似乎一直在无限循环中运行!我只希望useEffect中的回调运行一次。下面是我的代码供参考:

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('Run useEffect');
    setCount(100);
  });

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

ReactDOM.render(<Counter />, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

共有1个答案

吴弘壮
2023-03-14

发生这种情况是因为每次呈现后都会触发useEffect,在本例中是函数组件的counter()函数的调用。当您在useEffect中执行从useState返回的setx调用时,React将再次呈现该组件,并且useEffect将再次运行。这会导致无限循环:

计数器()使用效果()setcount()计数器()使用效果()→...(循环)

若要使useEffect只运行一次,请传递一个空数组[]作为第二个参数,如下面的修订代码段所示。

第二个参数的目的是告诉React,当数组参数中的任何值发生更改时:

useEffect(() => {
  setCount(100);
}, [count]); // Only re-run the effect if count changes

您可以将任意数量的值传递到数组中,useEffect仅在其中任何一个值更改时运行。通过传入一个空数组,我们告诉React不要跟踪任何更改,只运行一次,有效地模拟ComponentDidMount

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('Run useEffect');
    setCount(100);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

ReactDOM.render(<Counter />, document.querySelector('#app'));
html prettyprint-override"><script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>
 类似资料:
  • 问题内容: 我正在尝试新的React Hooks的API,它似乎一直在无限循环中运行!我只希望回调运行一次。这是我的代码供参考: 单击“运行代码段”,以查看将“ Run useEffect”字符串无限打印到控制台。 问题答案: 发生这种情况是因为在每次渲染后都会触发,这是在这种情况下无状态功能组件的调用。当你做一个从返回的呼叫中,阵营将再次呈现该组件,并再次运行。这将导致无限循环: →交通→交通→

  • 我在useeffect钩子上得到以下错误。 React Hook use效应有一个缺失的依赖项:当前页面。要么包含它,要么删除依赖array.eslintreact-钩子/穷举-deps 你知道我为什么会得到这个吗? }

  • 我对react钩子和效果有点陌生,在使用useEffect时遇到了问题 上面的代码是我构建的useEffect,用于使用axios获取数据库中的所有数据,并且我将所有数据放在一个称为reports的状态中。 但是当我console.log报告时,它会导致无限循环。我不知道为什么? 让我给你看一个我做的简单动作。 我正在做一个按钮,当它被点击时,报告的状态(按id)将被更新。 这是该州报告结构的样本

  • 我一直试图了解钩子,特别是useEffect及其依赖项列表,但出于某种原因,下面的代码一直在无休止地运行。我发现了这个非常相关的问题,但没有能够按照那里的建议使我的代码工作。下面是错误代码,您可能必须启用浏览器控制台才能看到循环。 实际上,我有一个状态(),它使用fetch(在本例中是假的)进行更新。当尚未提取帐户时,被设置为false。这确保了在调用时,它不会获取余额。我希望控制台最初记录一个n

  • 问题内容: 根据文档: 更新发生后立即调用。初始渲染不调用此方法。 我们可以使用新的钩子来模拟,但似乎在每次渲染后都被运行,即使是第一次也是如此。如何使它不在初始渲染上运行? 如您在下面的示例中看到的那样,它是在初始渲染期间打印的,但在初始渲染期间没有打印的。 问题答案: 我们可以使用该钩子来存储我们喜欢的任何可变值,因此我们可以使用它来跟踪函数是否是第一次运行。 如果我们希望效果在与该效果相同的

  • 我是一个反应和学习钩子的新手,但是我不能在第二次执行时从使用状态中逃脱。 我的调用程序函数正在使用参数调用另一个名为QueryPanel的组件: 因此,Panel1 以字符串数组或空数组打开。我想做的是显示下拉列表,如果参数不为空,则将第一项显示为默认项目,或者如果参数列表为空,则显示字符串作为默认值“无可用选项” 我的if-else陷入了无限循环,因为每当我将默认值设置为某个值时,它都会再次进入