React项目setInterval仅调用一次 背景图片轮播功能异常如何解决

changingBackground方法每次执行时都会初始化局部变量i = 0，导致每次执行后索引只会从0变为1，下一次调用又重置为0，最终只会从bg1切换到bg2就停止变化，并非setInterval只触发一次。

把轮播索引放到组件的实例属性/state中持久化存储，不要在轮播方法内部定义局部索引变量，以下是两个可行实现方向：

方案1：将索引存入state（推荐，符合React状态管理规范） #

import React, { Component } from 'react'
import './Login.css'
import LoginHousing from './LoginHousing'
import bg1 from '../../images/backgrounds/lawn-maintenance.jpg'
import bg2 from '../../images/backgrounds/body-shop.jpg'
import bg3 from '../../images/backgrounds/mechanic.jpg'
import bg4 from '../../images/backgrounds/painting.jpg'
import bg5 from '../../images/backgrounds/hair-stylist.jpg'

// 静态图片数组提到组件外部，避免重复声明
const images = [bg1, bg2, bg3, bg4, bg5]

export default class Login extends Component {
  constructor(){
    super()
    this.state = {
      loginBg: bg1,
      bgIndex: 0 // 新增索引状态持久存储轮播进度
    }
  }

  changingBackground() {
    const nextIndex = this.state.bgIndex < images.length - 1 ? this.state.bgIndex + 1 : 0
    this.setState({
      bgIndex: nextIndex,
      loginBg: images[nextIndex]
    })
  }

  componentDidMount() {
    this.timer = setInterval(
      () => this.changingBackground(),
      2000
    );
  }

  componentWillUnmount(){
    clearInterval(this.timer)
  }

  render() {
    return (
      <div className='login vw-100 vh-100' style={{backgroundImage: `url(${this.state.loginBg})`}}>
        <LoginHousing />
      </div>
    )
  }
}

方案2：将索引存为组件实例属性（适合不想额外新增state字段的场景） #

仅修改constructor和changingBackground方法即可：

constructor(){
  super()
  this.state = {loginBg: bg1}
  this.bgIndex = 0 // 把索引存在组件实例上
  this.images = [bg1, bg2, bg3, bg4, bg5]
}

changingBackground() {
  if (this.bgIndex < this.images.length - 1) {
    this.bgIndex++;
  } else {
    this.bgIndex = 0;
  }
  this.setState({loginBg: this.images[this.bgIndex]})
}

• 可以给背景元素加transition: background-image 0.5s ease-in-out的CSS属性，让图片切换过程更流畅
• 轮播间隔建议调整为3-5秒，避免切换频率过高影响用户填写登录信息的体验

内容的提问来源于stack exchange，提问作者Chase Quinn