Preact setState 挂钩不会在 setInterval 内工作
Preact setState hook wont work within a setInterval
CodeSandbox
尝试在 preact/hook
的 setInterval
内 useState
。这是行不通的,看起来它一直在执行以前的调用堆栈(?)。有人可以帮助我理解并帮助我修复此代码段吗?
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};
您需要使用setTimeout。 setInterval 永远不会被取消,所以每次渲染都会添加一个新的 1s 重复计时器。这是您的沙箱以两种不同的方式修复(setTimeout
或使用 useEffect
在挂载上安装重复计时器):
useEffect
没有依赖项 []
将作为 componentDidMount 挂载我们的间隔,我们可以 return 一个函数在卸载时调用,我们应该在卸载时清除我们的间隔避免内存泄漏。
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + 1);
}, 1000);
return () => clearInterval(id);
}, []);
CodeSandbox
尝试在 preact/hook
的 setInterval
内 useState
。这是行不通的,看起来它一直在执行以前的调用堆栈(?)。有人可以帮助我理解并帮助我修复此代码段吗?
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};
您需要使用setTimeout。 setInterval 永远不会被取消,所以每次渲染都会添加一个新的 1s 重复计时器。这是您的沙箱以两种不同的方式修复(setTimeout
或使用 useEffect
在挂载上安装重复计时器):
useEffect
没有依赖项 []
将作为 componentDidMount 挂载我们的间隔,我们可以 return 一个函数在卸载时调用,我们应该在卸载时清除我们的间隔避免内存泄漏。
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + 1);
}, 1000);
return () => clearInterval(id);
}, []);