React.js示例计数器应用故障：点击按钮count值不递增

嘿，我懂你遇到的困扰啦！你的计数器点击按钮后count数值没变化，核心问题出在你直接修改了React的state值，这不符合React的状态更新规则哦。

为什么直接改state没用？ #

React的state是不可直接修改的，你用this.state.count++这种方式改状态，React根本检测不到状态发生了变化，自然不会触发组件重渲染，页面上的count数值也就不会跟着更新啦。

正确姿势：用setState()更新状态 #

React专门提供了setState()方法来处理状态更新，它会通知React状态已变更，需要重新渲染组件。当新状态依赖旧状态时，推荐用函数式更新的方式，这样能确保我们拿到的是最新的状态值，避免异步更新带来的问题。

下面是修正后的完整代码：

class Counter extends React.Component {
  constructor(props){
    super(props);
    this.handleAddOne = this.handleAddOne.bind(this);
    this.state = { count : 0 };
  }

  handleAddOne() {
    console.log('handleAddOne');
    // 基于前一个状态计算新值，确保状态更新的准确性
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  render() {
    return (
      <div>
        <h1>Count:{this.state.count}</h1>
        <button onClick={this.handleAddOne}>+1</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('app'));

补充小提示 #

如果是简单的状态更新，也可以用对象形式的setState，比如：

this.setState({ count: this.state.count + 1 });

但这种方式在异步更新场景下可能会出现状态不一致的问题，所以当你的新状态依赖旧状态时，函数式更新是更稳妥的选择。

内容的提问来源于stack exchange，提问作者Prem