在循环中更改setState

Question

如何显示一个计数器从1到2到3再到n的按钮点击。我尝试在for循环中执行setState，但不起作用。我知道React的setState是异步的，我甚至尝试过使用prevState，但它不起作用。

import React, { Component } from 'react';

class App extends Component {

    constructor(props) {
        super(props);
      this.state = {
      counter: 0

      };

      this.startCounter = this.startCounter.bind(this);
    }

    startCounter() {
      const self = this;
      for (let i = 0; i < 100; i++) {
        this.setState(prevState => {
          const counter = prevState.counter + 1;
          return Object.assign({}, prevState, {counter: counter})
        });
      }
    }

    render() {
        return (
            <div>
              Counter Value: {this.state.counter}
               <button onClick={this.startCounter}>Start Counter</button>
            </div>
        )
    }
}

export default App;

https://www.webpackbin.com/bins/-kku1nja-ectflydgf_s

我想把计数从0增加到n，作为点击时的定时器。

Answer 1

像这样的东西？

当您运行startcounter()函数时，您开始间隔，使counter值每秒递增1。一旦它达到n（在本例中为5)，它就会重置。

class App extends React.Component {
  constructor() {
    super();
    this.interval;
    this.state = {
      counter: 1,
      n: 5
    };
  }

  startCounter = () => {
    if (this.interval) return; //if the timer is already running, do nothing.
    this.interval = setInterval(() => {
      let c = (this.state.counter % this.state.n) + 1;
      this.setState({
        counter: c
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval); //remove the interval if the component is unmounted.
  }

  render() {
    return ( 
      <div>
        Counter Value: {this.state.counter}
        <button onClick={this.startCounter}>Start Counter</button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>