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

Question

为什么我的间隔变快了？ 当我按下任何按钮 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);
  };

Answer 1

当你需要一些依赖改变变量的逻辑时，最好将这些逻辑放在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]);

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