无法获得正确的复选框状态

Question

奇怪的事情正在发生。 我使用基础开关作为我的复选框。

当我在react浏览器工具上查看状态时，我的检查状态为true。 当我在处理程序中控制台记录状态时，它是错误的。 错误在哪里？

es6：

constructor(props){
  super(props);
  this.state = {
    checked: false
  },
  this._handleChange = this._handleChange.bind(this)
}

_handleChange(){
  this.setState({ checked: !this.state.checked });
  console.log(this.state.checked); // becomes the opposite the state!
}

渲染：

<div className="switch">
  <input className="switch-input" id="exampleSwitch" type="checkbox" onChange={this._handleChange} checked={this.state.checked} name="exampleSwitch">
  <label className="switch-paddle" htmlFor="exampleSwitch">
    <span className="show-for-sr">Download Kittens</span>
  </label>
</div>

单击后，我的react控制台将其显示为true但在控制台中为false 。 console.log()显示与状态相反的状态。 如果状态为false则日志显示为true 。 任何原因？

编辑另一种方法：

_onSubmit(){
 let checked = this.state.checked;
 $.ajax({
  ...
  data: {"checked": checked },
  ...
 });
}

Answer 1

从React 文档中 ：

setState（）不会立即使this.state发生突变，但会创建一个挂起的状态转换。 调用此方法后访问this.state可能会返回现有值。

因此， console.log()可能在此处以意外方式工作。 为了获得正确的结果，您可能希望将第二个参数传递给setState() ：

第二个（可选）参数是一个回调函数，将在setState完成并重新呈现组件后执行。

_handleChange(){
  this.setState({ checked: !this.state.checked }, () => {
    console.log(this.state.checked); // output will be as expected
  });  
}

Answer 2

setState（）不是同步操作，因此，API使您能够在setState（）完成时向其回调以执行某些操作。 下面的示例未经测试的代码。 文档： Facebook setState（）文档。

 var Component = React.createClass({ getInitialState: function() { return ({ initialState: true }); }, changeState: function() { this.setState({ initialState: false }, function() { console.log(this.state.initialState); // this is the callback }); }, render: function() { return ( <button type="button" onClick = {this.changeState}> Test component </button> ); } }); 

 <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>