时间戳

首页 > 解决方案 > 如何定期更改状态值？

javascript - 如何定期更改状态值？

问题描述

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 = 表示图像位置

标签： javascriptreactjs

解决方案

在 中保留当前图像的索引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>

推荐阅读