setTimeout & setInterval 与 React hooks 一起使用，（自动滑块）

Question

我制作了一个滑块（手动滑块）并尝试使其也自动但失败了.. 我希望在单击箭头按钮时，会调用清除间隔，但是会出现一个警告，该间隔 (const interval = setInterval(() => {setX(x => x + 100)}, 1000);) 不是用过...........请帮助我知道我错在哪里

import React, { useState, useEffect } from "react";
import "./Slider.scss";
import ImgComp from "./ImgComp";
import pro1 from "./Images/pro1.jpeg";
import pro2 from "./Images/pro2.jpeg";
import pro3 from "./Images/pro3.jpeg";
import { IoIosArrowForward } from "react-icons/io";
import { IoIosArrowBack } from "react-icons/io";

function Slider() {
  let sliderArr = [
    <ImgComp src={pro1} />,
    <ImgComp src={pro2} />,
    <ImgComp src={pro3} />,
    <ImgComp src={pro1} />,
    <ImgComp src={pro2} />,
    <ImgComp src={pro3} />
  ];
  
  const [x, setX] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {setX(x => x + 100)}, 1000); // for automatic slider
    //return() =>{}
  }, []);

  const goLeft = () => {
    clearInterval(interval) // to stop slider 
    x === 0 ? setX(-100 * (sliderArr.length - 1)) : setX(x + 100);
  };
  const goRight = () => {
    x === -100 * (sliderArr.length - 1) ? setX(0) : setX(x - 100);
  };



  

  return (
    <div className="slider">
      {sliderArr.map((item, index) => {
        return (
          <div
            key={index}
            className="slide"
            style={{ transform: translateX(${x}%) }} >
            {item}
          </div>
        );
      })}
      <button id="goLeft" onClick={goLeft}  >
        <i>
          <IoIosArrowBack />
        </i>
      </button>
      <button id="goRight" onClick={goRight}>
        <i>
          <IoIosArrowForward />
        </i>
      </button>
    </div>
  );
}
export default Slider;

/*Actually, this is .scss file */


.slider{
  position: relative;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  overflow:hidden;
  background: black;
  i{
    font-size: 2vw;
  }
}

.slide{
  min-width: 100%;
  height: 80%;
  transition: 0.5s;
  overflow:hidden;
}

%btn-styles {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10%;
  height: 80%;
  background: none;
  border:none;
  outline: none;
  transition: 0.5s;
  &:hover{
    background-color: rgba(199, 195, 195, 0.301);
    cursor: pointer;
    i{
      color:whitesmoke
    }
  }
}

#goLeft{
  left:0;
  @extend %btn-styles;
}

#goRight{
  right:0;
  @extend %btn-styles;
}

Answer 1

我认为您遇到的问题是因为“间隔”的范围。它定义在 useEffect 中，它的作用域与 Component 不同。当调用 clearInterval(interval) 时，interval 没有定义，因为它超出了它的范围。要解决这个问题，您必须在 useEffect 之外定义间隔：

 const [x, setX] = useState(0);

 let interval; // can also go outside of component (even better!).
  useEffect(() => {
    interval = setInterval(() => {setX(x => x + 100)}, 1000); // for automatic slider
    //return() =>{}
  }, []);

  const goLeft = () => {
    clearInterval(interval) // to stop slider 
    x === 0 ? setX(-100 * (sliderArr.length - 1)) : setX(x + 100);
  };
  const goRight = () => {
    x === -100 * (sliderArr.length - 1) ? setX(0) : setX(x - 100);
  };

备注：由于您在 goLeft 时清除了间隔，而不是 goRight，因此您的行为不一致，一旦单击 goLeft，您的间隔将永远不会重新开始。您可能想检查这是否是所需的行为。？