如何定期更改 state 值？

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>
  );
}

問題：上述時序 function 定期更改 state，但 4 秒后圖像變化不受控制

問：如何每 1 秒更換一次 state？ 所需圖像的重復。

image_3/image_2 = 表示圖像位置

Answer 1

在state中保留當前圖像的索引，然后定義一個每秒遞增它的方法。 在useEffect中調用該方法以在頁面加載時啟動，然后通過索引數組來使用正確的圖像填充img 。

 function Carousel() { const [imageIndex, setImageIndex] = React.useState(0); const images = ["image_1", "image_2", "image_3"]; const nextImage = () => { setImageIndex(prev => (prev + 1) % images.length) setTimeout(nextImage, 1000) } React.useEffect(nextImage, []) return ( <div> <img src={images[imageIndex]} alt={images[imageIndex]}/> </div> ); } 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>