React报错了怎么办

最新推荐文章于 2025-06-04 10:26:49 发布

原创最新推荐文章于 2025-06-04 10:26:49 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

js 同时被 2 个专栏收录

8 篇文章

订阅专栏

react

4 篇文章

订阅专栏

本文探讨了在React中使用定时器时遇到的问题，特别是当组件卸载时如何正确清理定时器，避免内存泄漏。通过实例展示了如何在componentWillUnmount生命周期方法中清除定时器。

最近在学习react，遇到一个报错。代码如下

class H1 extends Component {
  state = {
    num: 0,
  };
  timer = 0;
  // 定时器在挂载时设置了，在卸载时应该销毁
  // 如果实在render时设置了，在卸载时无法销毁
  componentDidMount() {
    let { num } = this.state;
    this.timer = setInterval(() => {
      num++;
      this.setState({ num });
      // console.log(num);
    }, 1000);
  }
  render() {
    return <h1>{this.state.num}</h1>;
  }
  componentWillUnmount() {
    // clearInterval(this.timer);
  }
}
class App extends Component {
  state = {
  
    show: true,
  };
 
  changeColor = (a) => {
    this.setState({
      color: a,
    });
  };
  changeShow = () => {
    this.setState({
      show: !this.state.show,
    });
  };
  render() {
    return (
      <div className="App">
   
        <button onClick={this.changeShow}>取消倒计时</button>
        {this.state.show && <H1></H1>}
      </div>
    );
  }
}

运行之后，简单的实现计时效果
在这里插入图片描述
但是点击取消计时器时控制台会出现如下错误提示

错误翻译过来的意思是，无法在一个已卸载组件更新state状态，这是一个无作业组件，但是会造成内存泄漏。要处理这个问题，需要在componentWillUnmount方法里面取消所有订阅和异步任务。
也就是说我们的定时器已经没用了，需要进行销毁，如果不销毁会造成内存浪费
所以我们进行如下操作

 componentWillUnmount() {
    clearInterval(this.timer);
  }

请允许自己写出垃圾，否则你连垃圾都写不出来。