React必须为响应切换两次状态

Question

我对React很新，所以我确保尽可能地研究这个。 但由于某些原因，当我渲染时，我必须手动启动状态以获得响应。

以下是其中的一部分：

export class exampleOne extends React.Component {
    constructor(props){
        super();
        this.state = {
            buttonToggleState: true,
            secondToggleState: true
        }

componentDidMount() {
    this.setupPage();
}

buttonToggle() {
    var newToggleState = !this.state.buttonToggleState;
    this.setState({
        buttonToggleState: newToggleState,
        secondToggleState: !this.state.secondToggleState
    });
}

render() {
    return (
         <input type="checkbox" onChange={this.buttonToggle.bind(this)} 
             defaultChecked={this.state.secondToggleState} />

它的工作原理，我必须单击两次复选框才能更改为实际渲染。它会改变状态，直到第二次点击才会进行渲染，然后才能正常工作。