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

Question

我正在尝试每 5 秒更改一次组件的状态，如下所示在组件DidMount(( 钩子中

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>
    );
  }
}

但它只执行一次。它从假变为真一次，然后什么都没有。我错过了什么？

Answer 1

componentDidMount()仅在组件挂载时执行一次，并且您只调度一次。您必须使用setInterval()定期安排它。

此外，当您根据当前状态更新状态时，您应该在 setState() 中使用回调，该回调采用以前的状态，因为 react 可能会批处理多个调用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 ...
}

Answer 2

好吧，setTimeout只会执行一次，您正在寻找的是setInterval：

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

WindowOrWorkerGlobalScope mixin 的 setTimeout(( 方法(和 window.setTimeout的后继者(设置执行函数的计时器 或在计时器到期后指定的一段代码。

儗

WindowOrWorkerGlobalScope mixin 的 setInterval(( 方法 重复调用函数或执行代码片段，具有固定的 每次调用之间的时间延迟。

Answer 3

如注释中所述，您必须使用 setInterval . 函数setTimeout调用一次。确保在卸载组件时清除 setInterval。https://reactjs.org/docs/react-component.html#componentwillunmount

代码。

import React, { Component } from 'react';
export default class ToTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      test: false
    };
  }
  componentDidMount() {
    this.timer = setInterval(() => { this.setState({ test: !this.state.test }) }, 5000);
  }
  componentWillUnmount() {
    clearInterval(this.timer)
  }

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