asynchronous - Preact setState hook 在 setInterval 中不起作用
问题描述
CodeSandbox
试图useState
在setInterval
一个preact/hook
. 这不起作用,看起来永远迭代它正在执行以前的调用堆栈(?)。有人可以帮助我理解并帮助我修复这个片段吗?
import {h} from 'preact';
import {useState} from 'preact/hooks'
const interests = [
{name: 'the future',},
{name: 'architecture',},
{name: 'my work',},
{name: 'your work',},
{name: 'collaboration',},
{name: 'dank memes',},
{name: 'OOP vs. Functional',},
{name: 'design',},
{name: 'guitar',},
{name: 'inspirational people',},
{name: 'love',},
{name: 'travel',},
{name: 'singularity',},
{name: 'creativity',},
{name: 'mixed, virtual, augmented reality',},
{name: 'art',},
{name: 'imagination',},
{name: 'problem solving',},
{name: 'space',},
{name: 'cooking',},
{name: 'FOMO',},
{name: 'ontological design',},
{name: 'flow state',},
{name: 'foreign languages',},
{name: 'streaming on the internet',},
{name: 'video games',},
{name: 'coffee',},
{name: 'crypto currency',},
{name: 'javascript fatigue',},
{name: 'framework wars',},
{name: 'blockchain',},
{name: 'smart contracts',},
{name: 'just emailing me'},
{name: 'ethereum'},
{name: 'university'},
{name: 'engineering software'},
];
const RunningHeader = () => {
const [count, setCount] = useState(0);
setInterval(() => {setCount(c => c + 1)}, 1000);
return (
<header>
<p>{interests[count].name}</p>
</header>
)}
export {RunningHeader};
解决方案
useEffect
没有依赖[]
项将充当 componentDidMount 来挂载我们的间隔,我们可以返回一个函数来在卸载时调用,我们应该在卸载时清除我们的间隔以避免内存泄漏。
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + 1);
}, 1000);
return () => clearInterval(id);
}, []);
推荐阅读
- python - docker新手-构建映像后无法运行.sh文件
- bar-chart - 如何使用 AWS QuickSight 在条形图中显示百分比而不是计数
- javascript - 将特定字符移动到字符串末尾的递归 JS 函数
- asp.net-core - Asp.net Core 如何为 PackageReference 指定 TargetFramework?
- reactjs - 如何使用 reactjs 将一个组件两次用于另一个选项卡?
- python-3.x - 无法使基本的 Celery 示例正常工作(无法连接到 amqp://guest:**@127.0.0.1:5672//)
- wordpress - WooCommerce 重复第一个产品图片
- amazon-web-services - Sails.js 应用程序无法连接到 AWS RDS 数据库中的 MySql 数据库,适用于 localhost(MySql)
- java - android studio 看不到模拟器
- azureservicebus - 我们可以根据 Azure Service Bus 中的消息内容查询消息吗?