ReactJS setState不能在第一次切换复选框时工作

Question

是否有setState无法投降的原因？我已经使用console.log回调来检测状态是否已经改变，但无济于事。

以下是我正在使用的代码。还有更多这样的状态是函数调用的bool，但函数的基础知识就在这里。

export class ExampleClass extends React.Component {
constructor(props) {
  super(props);
    this.state = {
      usingToggleOne: false
    };
  }
}
toggleforToggleOne(event) {
  this.setState({
    usingToggleOne: !this.state.usingToggleOne,
  }); 
}

render() {
  return(
    <input type="checkbox"
                   onChange={this.toggleforToggleOne.bind(this)} />
}

我第一次点击复选框，它会打勾，但状态不会改变，但是在它正常工作之后。有什么原因吗？我很幸运使用Object.assign来获得第一个工作，但我不想使用它，因为它会改变状态。

Answer 1

在console.log()或render()方法中尝试componentDidUpdate()，如以下代码和此代码中所示：http://codepen.io/PiotrBerebecki/pen/ZpLNZd

您还可以使用传递给＆＃39; setState＆＃39; 的可选回调函数访问新状态。更多信息：http://reactkungfu.com/2016/03/dive-into-react-codebase-handling-state-changes/#solving_the_validation_problem

每次勾选/取消勾选框时，状态bool都会更改。

另外，请注意React文档中的以下内容：https://facebook.github.io/react/docs/component-api.html#setstate

  

无法保证对setState的调用同步操作，并且可以对调用进行批处理以提高性能。   除非在shouldComponentUpdate（）中实现条件呈现逻辑，否则setState（）将始终触发重新呈现。如果正在使用可变对象且无法在shouldComponentUpdate（）中实现逻辑，则仅当新状态与先前状态不同时调用setState（）将避免不必要的重新渲染。

class ExampleClass extends React.Component {
  constructor() {
    super();
    this.state = {
      usingToggleOne: false
    };

  }

  toggleforToggleOne(event) {
    console.clear();
    console.log('check in toggle before set state', this.state.usingToggleOne);
    this.setState({
      usingToggleOne: !this.state.usingToggleOne
    }, function afterStateChange () {this.useNewState();});
    console.log('check in toggle after set state', this.state.usingToggleOne);
  }

  useNewState() {
    console.log('check in useNewState callback', this.state.usingToggleOne);
  }

  componentWillUpdate() {
    console.log('check in componentWillUpdate', this.state.usingToggleOne);
  }

  componentDidUpdate() {
    console.log('check in componentDidUpdate', this.state.usingToggleOne);
  }

  render() {
    console.log('check in render', this.state.usingToggleOne);
    return(
      <input type="checkbox"
             onChange={this.toggleforToggleOne.bind(this)} />
    );
  }
}