为了账号安全,请及时绑定邮箱和手机立即绑定

如何定期更改状态值?

如何定期更改状态值?

沧海一幻觉 2022-11-27 16:54:10
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 = 表示图像位置
查看完整描述

1 回答

?
慕容森

TA贡献1853条经验 获得超18个赞

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


查看完整回答
反对 回复 2022-11-27
  • 1 回答
  • 0 关注
  • 61 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信