在循环中更改 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;

webpack bin 下面

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>