以这种方式使用 useState 和 UseEffect 使滑块第一次但随后不起作用

编程问答 2022-04-29

问题描述

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);
},[]);

设置间隔仅一次，当组件安装时。

reactjsreactjsreactjsreactjssliderslider