时间戳

首页 > 解决方案 > 为什么我的 setInterval() 在我的 React 图像滑块中加速？

reactjs - 为什么我的 setInterval() 在我的 React 图像滑块中加速？

问题描述

为什么我的间隔变快了？当我按下NextImage()或PrevImage( ) 中的任何一个按钮时，我的间隔开始加快，图像开始出现故障。有什么建议或帮助吗？这是我的代码 =>

//Image is displayed
  const [image, setImage] = React.useState(1);
  let imageShowed;
  if (image === 1) {
    imageShowed = image1;
  } else if (image === 2) {
    imageShowed = image2;
  } else if (image === 3) {
    imageShowed = image3;
  } else {
    imageShowed = image4;
  }

  // Auto change slide interval
  let interval = setInterval(
    () => (image === 4 ? setImage(1) : setImage(image + 1)),
    5000
  );
  setTimeout(() => {
    clearInterval(interval);
  }, 5000);

  // Change image functionality
  const ChangeImage = (index) => {
    setImage(index);
  };
  / /Next image
  const NextImage = () => {
    image === 4 ? setImage(1) : setImage(image + 1);
  };

  // Previous image
  const PrevImage = () => {
    image === 1 ? setImage(4) : setImage(image - 1);
  };

标签： reactjs

解决方案

当您需要一些depend更改变量的逻辑时，最好将这些逻辑保留在内部useEffect

const interval = useRef(null);
const timeout = useRef(null);
useEffect(() => {
  interval.current = setInterval(
    () => (image === 4 ? setImage(1) : setImage((i) => i + 1)),
    5000
  );
  timeout.current = setTimeout(() => {
    clearInterval(interval.current);
  }, 5000);

  return () => {
    clearInterval(interval.current);
    clearTimeout(timeout.current);
  }
}, [image]);

要记住的一点是，如果您使用 avariable而不是使用useRef它，则可能会增加在重新渲染期间清除错误的间隔或超时实例的可能性。useRef可以保留实例并避免任何不需要的bugs

推荐阅读