Javascript ReactJS setState在复选框的第一个切换上不工作

是否有原因

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

导出类ExampleClass扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
使用ToggleOne:false
};
}
}
toggleforToggleOne（事件）{
这是我的国家({
usingToggleOne:！this.state.usingToggleOne，
}); 
}
render（）{
返回(
}

我会第一次点击复选框，它会打勾，但状态不会改变，但在它正常工作之后。有什么原因吗？我很幸运地使用了

对象。分配
使第一个打勾生效，但我不想使用它，因为它会改变状态。
尝试
渲染（）中的
控制台.log（）
）
或在
componentDidUpdate（）
方法中，如下面的代码和此代码笔中所示：


您还可以使用传递给“setState”的可选回调函数访问新状态。更多信息：

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

此外，请注意React文档中的以下内容：

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

class ExampleClass扩展了React.Component{
构造函数（）{
超级（）；
此.state={
使用ToggleOne:false
};
}
toggleforToggleOne（事件）{
console.clear（）；
console.log（'check-in-toggle-before-set-state'，this.state.usingToggleOne）；
这是我的国家({
usingToggleOne:！this.state.usingToggleOne
}，函数afterStateChange（）{this.useNewState（）；}）；
console.log（'设置状态后签入切换'，this.state.usingToggleOne）；
}
useNewState（）{
log（'check in useNewState callback'，this.state.usingToggleOne）；
}
componentWillUpdate（）{
console.log（'checkin componentWillUpdate'，this.state.usingToggleOne）；
}
componentDidUpdate（）{
console.log（'check-in-componentDidUpdate'，this.state.usingToggleOne）；
}
render（）{
console.log（'check-in-render'，this.state.usingToggleOne）；
返回(
);
}
}
很有趣！所以我在render中调用了它，它返回了正确的状态，但我也调用了render之前的状态，在
componentWillUpdate
中，我得到了不正确的状态。很好！我在回答中添加了进一步的信息来解释这一点。哦，好的，这对于出现问题的原因有很大的意义。我正在进一步研究，似乎
LinkedStateMixin
是解决方案。谢谢：）编辑：似乎它已经被弃用了，我想是双向绑定？我已经更新了我的答案（和codepen），以表明可以在
组件DIDDUpdate
中观察到状态更改。这个答案现在为你澄清了吗？没关系。通过
componentdiddupdate
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)} />
    );
  }
}