如何定期更改状态值？

Question

function Carousal() {

  const [image, setImage] = useState(image_1);

 

  return (

    <div>

          

            {setInterval(() => {setImage(image_1)}, 1000)}

            {setInterval(() => {setImage(image_2)}, 2500)}

            {setInterval(() => {setImage(image_3)}, 3500)}

            

             {Note : above functions are for state change}

            <img src={image}  />

         

    </div>

  );

}

问题：上面的定时函数周期性的改变状态，但是4秒后图像会不受控制的改变

问题：如何每 1 秒更改一次状态？所需图像的重复。

image_3/image_2 = 表示图像位置

Answer 1

在 中保留当前图像的索引state，然后定义一种每秒递增它的方法。调用该方法useEffect以在页面加载时启动，然后img通过索引数组用正确的图像填充。function Carousel() {&nbsp; const [imageIndex, setImageIndex] = React.useState(0);&nbsp; const images = ["image_1", "image_2", "image_3"];&nbsp; const nextImage = () => {&nbsp; &nbsp; setImageIndex(prev => (prev + 1) % images.length)&nbsp; &nbsp; setTimeout(nextImage, 1000)&nbsp; }&nbsp; React.useEffect(nextImage, [])&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp;<img src={images[imageIndex]} alt={images[imageIndex]}/>&nbsp; &nbsp; </div>&nbsp; );}ReactDOM.render( <Carousel /> , document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><div id="root"></div>