我正在尝试新的React Hooks的useEffect
API,它似乎一直在无限循环中运行!我只希望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>
发生这种情况是因为每次呈现后都会触发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陷入了无限循环,因为每当我将默认值设置为某个值时,它都会再次进入