setState多次更新

Question

我正在使用setInterval方法通过React的setState（）增加一个计数器。但是对于每个间隔，应用程序都会更新多次。

import React, { Component } from 'react';

export default class Arrival extends Component {
state = {
    count: 0,
    limitTo: 6
  }
  render() {
    try {
      setInterval(() => {
        this.setState({
          limitTo: this.state.limitTo + 6
        })
        console.log(this.state)
      }, 5000);
    } catch(err) {
      console.log(err)
    }
  return()
}
}

在最初的5秒钟内，状态将更新一次。

在接下来的5秒钟内，状态将更新2次。

在接下来的5秒钟内，状态将更新4次。等等...

我希望状态每5秒更新一次。

Answer 1

状态更新时，组件也将更新并重新呈现，因此setInterval不应位于render方法内。您可以改为：

class Arrival extends Component {
  state = {
    count: 0,
    limitTo: 6
  };

  interval = 0;

  componentDidMount() {
    try {
      this.interval = setInterval(() => {
        this.setState({
          limitTo: this.state.limitTo + 6
        });
        console.log(this.state);
      }, 5000);
    } catch (err) {
      console.log(err);
    }
  }

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

  render() {
    return <div />;
  }
}

  

注意：@FrankerZ提醒您，您还应该清理卸载组件的时间间隔，否则时钟将继续滴答;）

Answer 2

setInterval()在render()方法中被调用。这意味着：

1. 将在首次渲染时将其关闭。 计时器计时：1 。
2. 5秒后，它将触发并更改状态。这意味着该组件将需要重新渲染。
3. 由于setInterval()方法中调用了render()，因此渲染将启动另一个计时器。 计时器计时：2 。
4. 再过5秒。第一个计时器再次计时，这导致组件由于状态更改而重新呈现。另一个计时器启动。 计时器计时：3 。
5. 第二个计时器第一次计时。发生另一次重新渲染，并导致启动第四个计时器。 计时器计时：4 。
6. 无限广告

要解决此问题，请按照另一个答案的建议将setInterval移至componentDidMount()，以确保计时器仅启动一次，而不是在每个render上启动。