为什么我在函数式 React 组件中的 setInterval 只更改一次值？

Question

我尝试使用可编译的 setInterval 更改背景图像，但问题是，它只从图像 a.jpg 更改为 b.jpg 一次。

这是我的代码；

  const [currentImage, setCurrentImage] = useState<string>("/a.jpg");
  useEffect(() => {
    const intervalId = setInterval(() => {
      if (currentImage === "/a.jpg") {
        setCurrentImage("/b.jg");
      } else if (currentImage === "/b.jpeg") {
        setCurrentImage("/c.jpg");
      } else {
        setCurrentImage("/a.jpg");
      }
    }, 6000);
    return () => clearInterval(intervalId);
  }, []);

如何在nextjs中正确编写setInterval并使其返回起始图像？

Answer 1

您在

currentImage

回调中使用

useEffect

变量，但由于您未将其包含在依赖项数组中，因此当

"/a.jpg"

调用它时，它将始终具有其初始值 (

useEffect

)。这就是所谓的“过时参考”。 要解决此问题，您需要将

currentImage

添加到依赖项数组中，以便回调在发生变化时得到更新。

useEffect(() => {
  const intervalId = setInterval(() => {
    if (currentImage === "/a.jpg") {
      setCurrentImage("/b.jg");
    } else if (currentImage === "/b.jpeg") {
      setCurrentImage("/c.jpg");
    } else {
      setCurrentImage("/a.jpg");
    }
  }, 6000);
  return () => clearInterval(intervalId);
}, [ currentImage ]);

useEffect回调使用的任何变量都必须始终包含在依赖项数组中

请注意，这意味着每次

currentImage

发生变化时，“计时器”都会重新启动。如果这是不可接受的，您将需要一个更复杂的解决方案，涉及

useRef

。

Answer 2

const colorMap = {
"/a.jpg":"/b.jpg",
"/b.jpg":"/c.jpg",
"/c.jpg":"/a.jpg"
}


  const [currentImage, setCurrentImage] = useState<string>("/a.jpg");
  useEffect(() => {
    const intervalId = setInterval(() => {
     setCurrentImage(prevState => colorMap[prevState])
    }, 6000);
    return () => clearInterval(intervalId);
  }, []);