React中setState的一个坑

React新手教程6 事件处理

例如，下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => {
      isToggleOn: !state.isToggleOn
    });
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

乍一看和官方文档里没有什么区别，也不会报错，但是点击按钮，状态不会发生变化。
在handleClick函数里，this.setState(state=>{…})，这里
应该是this.setState(state=>({…})). 改完之后，就能正常切换了。

原因：不知。