React中setInterval调用changeActive触发active未定义TypeError问题求助

我帮你找到了问题的根源，顺便整理了完整的修复方案：

问题原因 #

你在constructor里的代码顺序出了问题：你先执行了setInterval(this.changeActive, 5000)，然后才给this.changeActive绑定组件实例。这时候传入定时器的是未绑定的原始方法，当定时器触发回调时，this的指向不是你的组件实例，自然就会抛出Cannot read property 'active' of undefined的错误。

另外还有一个潜在问题：当active增长到超过数组长度时，this.state.animationArr[this.state.active]会变成undefined，虽然不会直接报错，但页面上会显示空白，体验不佳。

修复方案 #

1. 调整绑定顺序：先绑定changeActive方法，再初始化定时器
2. 处理数组边界：用取模运算让active在数组索引范围内循环
3. 清除定时器：在组件卸载时清除定时器，避免内存泄漏

修改后的完整代码 #

<script type="text/babel">
class Frame extends React.Component{
  render(){
    return (
      <div>
        <h2 className="os-animation" data-os-animation="bounceInUp" data-os-animation-delay="0s">
          <span className="os-animation" data-os-animation="lightSpeedOut" data-os-animation-delay="5s">
            {this.props.message}
          </span>
        </h2>
      </div>
    )
  }
}

class DrawAnimation extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      animationArr:["Web developer", "University Student", "New generation's genius"],
      active:0,
      timer: null // 先初始化为null
    }
    // 先绑定方法，确保this指向组件实例
    this.changeActive = this.changeActive.bind(this)
    // 再设置定时器
    this.state.timer = setInterval(this.changeActive, 5000)
  }

  changeActive(){
    // 用取模运算让active循环，避免超出数组索引范围
    this.setState(prevState => ({
      active: (prevState.active + 1) % prevState.animationArr.length
    }))
  }

  // 组件卸载时清除定时器，防止内存泄漏
  componentWillUnmount(){
    clearInterval(this.state.timer)
  }

  render(){
    return (
      <Frame message={this.state.animationArr[this.state.active]}/>
    )
  }
}

ReactDOM.render(
  <DrawAnimation/>,
  document.getElementById('animation-container')
);
</script>

关键细节说明 #

• 绑定顺序：确保在调用setInterval之前完成方法绑定，这样传入定时器的是已经绑定了组件实例的方法，this就能正确指向组件。
• 取模运算：(prevState.active + 1) % prevState.animationArr.length会让active在0到数组长度-1之间循环，比如数组长度是3，active会依次是0→1→2→0→1→2...，永远不会超出索引范围。
• 清除定时器：在componentWillUnmount生命周期里清除定时器，防止组件卸载后定时器还在运行，造成不必要的内存消耗。

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