计数器应用无法在React上运行

Question

I created 2 buttons and wanna them increase their value clicking on each button. The code below doesn't work. Please, help ! All this code I render in html tag with class buttons .

class Buttons extends React.Component {
  state = { score_1: 0, score_2: 0 };

  updateScore_1() {
    this.setState((prevState) => {
      score_1: prevState.score_1 += 1
    });
  }
  updateScore_2() {
    this.setState((prevState) => {
      score_2: prevState.score_2 += 1
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.updateScore_1.bind(this)}>{this.state.score_1}</button>
        <br />
        <button onClick={this.updateScore_2.bind(this)}>{this.state.score_2}</button>
      </div>
    )
  }
}
ReactDOM.render(
  <Buttons />,
  document.querySelector('.buttons')
);

Answer 1

You missed the keyword return in this.setState. Just add return in this.setState :

updateScore_2() {
  this.setState((prevState) => {
    return { score_2: prevState.score_2 + 1 }
  });
}

Answer 2

You should write score_1: prevState.score_1 + 1 instead of score_1: prevState.score_1 += 1 . In your case you are mutating the state, however using the setState callback you need to return the updated state

this.setState((prevState) => ({   // notice the `({` here
  [key]: prevState[key] +1
}));

Also you can simply use one handler instead of two

 class Buttons extends React.Component { state = { score_1: 0, score_2: 0 }; updateScore(key) { this.setState((prevState) => ({ [key]: prevState[key] +1 })); } render() { return ( <div> <button onClick={this.updateScore.bind(this, 'score_1')}>{this.state.score_1}</button> <br /> <button onClick={this.updateScore.bind(this, 'score_2')}>{this.state.score_2}</button> </div> ) } } ReactDOM.render( <Buttons />, document.querySelector('.buttons') ); 

 <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 class="buttons"/> 

Answer 3

Your issue I guess was from the fact that in the setState methods your were not returning the new state which should have been passed to the setState method

  updateScore_1() {
    this.setState((prevState) => {
      score_1: prevState.score_1 + 1
    });
  }

A couple of parentheses solves your issue or you can just put a return in from of the new state object. See complete solution below:

class Buttons extends React.Component {
  constructor(props) {
    super(props);
    this.state = { score_1: 0, score_2: 0 };
    this.updateScore_1 = this.updateScore_1.bind(this);
    this.updateScore_2 = this.updateScore_2.bind(this);
  }

  updateScore_1() {
    this.setState(prevState => ({
      score_1: (prevState.score_1 += 1)
    }));
  }
  updateScore_2() {
    this.setState(prevState => ({
      score_2: (prevState.score_2 += 1)
    }));
  }
  render() {
    return (
      <div>
        <button onClick={this.updateScore_1}>{this.state.score_1}</button>
        <br />
        <button onClick={this.updateScore_2}>{this.state.score_2}</button>
      </div>
    );
  }
}

ReactDOM.render(
  <Buttons />,
  document.querySelector('.buttons')
);