Question

我创建了2个按钮，并希望通过单击每个按钮来增加它们的价值。下面的代码不起作用。请帮忙！我在html标记中使用类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

您在this.setState中错过了关键字return。只需在this.setState中添加return：

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

Answer 2

您应该写score_1: prevState.score_1 + 1而不是score_1: prevState.score_1 += 1。在您的情况下，您正在改变状态，但是使用setState回调您需要返回更新后的状态

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

您也可以只使用一个处理程序，而不是两个

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

我猜您的问题是由于以下事实：在setState方法中，您没有返回应该传递给setState方法的新状态

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

有两个括号可以解决您的问题，或者您只需将新状态对象的return放进去即可。请参阅下面的完整解决方案：

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')
);

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

3 个答案: