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

Question

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

react auto slide images 在前几次工作，然后随着图像的快速变化而变得有问题，而不考虑 5 秒的间隔

Answer 1

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

设置一个时间间隔只有一次，当组件挂载时。

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

Using useState and UseEffect in this way makes the slider for for the first times but then dosent work

slider

reactjs