如何解决以这种方式使用 useState 和 UseEffect 使滑块第一次但随后不起作用
const HeroSection = () => {
const [Change,setChange] = useState(false);
useEffect(() => {
setInterval(() => {
setChange(!Change)
},5000);
return () => clearInterval();
},[Change]);
return (
<HeroContainer>
<HeroBg>
<ImageBg src={ Change ? Image1 : Image2 } />
</HeroBg>
</HeroContainer>
)``
}
导出默认的 HeroSection
反应自动幻灯片图像在前几次工作然后变得有问题,因为无论 5 秒的间隔如何,图像的快速变化都会导致
解决方法
clearInterval();
什么都不做。您需要将创建的时间间隔的 ID 传递给 clearInterval
才能将其清除。
我也不认为效果挂钩应该将 change
作为依赖项,除非您改用 setTimeout
。
const [change,setChange] = useState(false);
useEffect(() => {
const timeoutId = setTimeout(() => {
setChange(!change)
},5000);
return () => clearTimeout(timeoutId);
},[change]);
在每次 change
更改时在效果回调中设置新的超时时间。
或者:
const [change,setChange] = useState(false);
useEffect(() => {
const intervalId = setInterval(() => {
setChange(change => !change)
},5000);
return () => clearInterval(intervalId);
},[]);
设置间隔仅一次,当组件安装时。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。