Question

发生了一些奇怪的事情。我使用foundation switch作为我的复选框。

当我在反应浏览器工具上查看我的状态时，我的检查状态为真。当我在控制台中记录状态时，它是错误的。错误在哪里？

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>

点击后，我的反应控制台会将其显示为true，但在控制台中，它是false。 console.log()表示与州相反。如果状态为false，则日志显示true。有什么原因吗？

编辑其他方法：

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

Answer 1

来自React documentation：

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() documentation.

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: