componentDidMount()中的setTimeout()不起作用

Question

我试图每隔5秒更改一个组件的状态,如下面的componentDidMount()挂钩

import React, { Component } from 'react';

export default class ToTest extends Component {

  constructor(props) {
    super(props);
    this.state = {
      test: false
    };
  }

  componentDidMount() {
    setTimeout(() => { this.setState({ test: !this.state.test }) }, 5000);
  }

  renderDiv() {
    if(this.state.test) {
      return (<div>test is true</div>)
    }
    else {
      return (<div>test is false</div>)
    }
  }
  render() {
    return (
      <div>{ this.renderDiv() }</div>
    );
  }
}

但它只执行一次.它从false变为true,然后没有变化.我错过了什么？

Answer 1

componentDidMount()仅在组件安装时执行一次,并且您只安排一次.您必须setInterval()定期使用它来安排它.

此外,当您根据当前状态更新状态时,您应该使用回调,setState()因为反应可以批量多次调用setState().

并且不要忘记取消计时器componentWillUnmount():

import React, { Component } from 'react';

export default class ToTest extends Component {
    state = {
        test: false,
    };

    componentDidMount() {
        this.timer = setInterval(
            () => this.setState(prevState => ({ test: !prevState.test })),
            5000,
        );
    }

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

    // other methods ...
}