- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在试用新的 React Hooks的 useEffect
API,它似乎永远在无限循环中运行!我只希望 useEffect
中的回调运行一次。这是我的引用代码:
单击“运行代码片段”以查看“运行 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
将再次运行。这会导致无限循环:
Counter()
→ useEffect()
→ setCount()
→ Counter()
→ useEffect()
→ ...(循环)
要让您的 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'));
<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 的信息.
关于javascript - React hook useEffect 永远/无限循环持续运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53243203/
如果我错了,但身份验证 session 有 30 天的最大限制,请纠正我?如果是这种情况,有没有办法让我的服务器节点应用程序永远监听经过身份验证的 dataRef? 干杯, 旅行。 最佳答案 自 on
我目前正在阅读 book Continuos Delivery由 Humble/Farley 撰写,虽然里面的很多东西都是有道理的,但有一件事让我烦恼: 似乎作者只针对基于服务器的(单客户端?)应用程
好吧,我非常了解每个人对自制密码管理器的看法,但我希望得到帮助。 不用于实际使用,仅供学习。 我想知道,在 C++ 中如何拥有长期变量。或者真的,有什么长期的。 长期是什么意思?在下次运行 .exe
我在文本文件中有以下三行(最后 3 行): } } } 我想做的是做这样的事情: } } blablabla blablabla blabla
在 iOS 中,有没有一种简单的方法可以在每天的同一时间发送 10 天的推送通知?我不想向所有用户发送推送通知。我的应用程序的工作方式是,用户可以选择连续十天推送通知的时间。您有推荐的 API 吗?或
我正在努力寻找一种当前最先进的方法来处理频繁更新的通知(例如每 3 分钟一次)。似乎在较新的 Android 版本中内置了如此多的电源效率调整(幸运的是!),我之前成功使用的方法(使用 Broadca
我不得不在一些糟糕的房地产网站上花费大量时间。我比较精通 CSS,并且可以(在 FireFox 中)“检查元素”并更改 CSS 以隐藏或缩小特定页面的华而不实的元素。但我想将此自定义 CSS 应用于特
目前正在研究如何使用 signalR 在处理文件时向用户呈现文件的进度报告。我正在使用 asp.net MVC 4。通过 Ajax 进行发布/获取时,我可以轻松获取状态更改。 因为我需要上传一个文件(
这个问题在这里已经有了答案: How can I round up the time to the nearest X minutes? (15 个答案) Is there a simple fun
我有一个 php 脚本,我想运行特定的时间(例如 5 分钟),但只能运行一次。对于 cron 作业,这将无限期地运行。还有别的办法吗? 最佳答案 处理这个问题的方法是: 当某些事件触发需要 cron
我弄乱了我的 apache 和 php.ini 文件,我网站的用户仍然提示该网站在很短的时间后或每次他们关闭并打开同一个浏览器时将他们注销。 我正在运行 Apache 和 PHP。 我应该进行哪些设置
如何查询今天的总和需要减去前一天的总和,每天持续一个月。 SELECT COUNT(DISTINCT member_profile.memberProfileNumber) FROM member_p
这个问题在这里已经有了答案: How do I add a delay in a JavaScript loop? (32 个答案) 关闭 8 年前。 我认为这个问题之前一定有人问过,但我找不到其他
用户在我的网站上注册后,我们会向他发送一封确认电子邮件。我想要的是 - 三天内每 24 小时为用户重新发送一次电子邮件。例如: user_table id , name, date_registere
最近我从 Codeigniter 换到了 Laravel,一切都很顺利,除了我遇到了 Session::flash 的问题。 当我创建新用户时,我收到成功消息,但它会持续 2 个请求,即使我没有通过验
如果有人能帮助我解决这个问题,我将非常感激。 我正在尝试针对 CPU 使用率 >= 80% 持续 30 分钟或更长时间创建 Azure 监视器警报 我已附上警报规则条件的屏幕截图。在“评估依据”下,聚
如果有人能帮助我解决这个问题,我将非常感激。 我正在尝试针对 CPU 使用率 >= 80% 持续 30 分钟或更长时间创建 Azure 监视器警报 我已附上警报规则条件的屏幕截图。在“评估依据”下,聚
希望大家平安 1。我的目标 我正在尝试模拟 3 天的真实情况。系统每天只能工作 8 小时。 我的目标是模型运行 8 小时,持续 3 天,以获得足够的数据进行分析。 2。我的问题 我有一个代理预约时间表
我需要在 8 小时内每 5 分钟调用一次函数。问题是它必须是同一天。例如,如果用户在 3/29 晚上 11:59 登录系统,而现在是 3/30 凌晨 12:01,则不应再调用该函数。 我知道如何每
我正在开发一个 React Native 应用程序,该应用程序使用 Firebase 的 Firestore 作为后端。现在,每次收到新消息时,我都会从 Firestore 获取所有消息并更新我的状态
我是一名优秀的程序员,十分优秀!