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 ...
}

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被调用一次。

代码。

import React, { Component } from 'react';

export default class ToTest extends Component {

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

  componentDidMount() {
    setInterval(() => { 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>
    );
  }
}

componentDidMount（）中的setTimeout（）不起作用

3 个答案: