React 中的切换状态工作正常，但检查我的函数不正确

Question

嗨，我的代码有一些时髦的东西。我的toggleChecked()应该在isChecked: true时选择所有房间，这意味着当在UI中选中复选框时选择所有房间。

它的工作，当isChecked is true时，它会选择所有房间，但是toggleCheck()我的检查是this.state.isCheck === false如果是这样，请选择所有房间。这个检查应该是this.state.isCheck === true。当我有这个true检查它没有按预期工作时。例如，当复选框未选中时，就是所有房间都被选中的时候。但是当检查是针对false时，它会按预期工作。

```
   if(this.state.isChecked === false){
        const roomOrder = //this variable has all the rooms in an array;
        this.setState({selectedRooms: roomOrder}); 
    }else{
        this.setState({selectedRooms : []}); 
    }```

export default class Room extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
               isChecked: false
            };
            this.toggleChecked = this.toggleChecked.bind(this);
        }
    toggleChecked() {
        this.setState( ({ isChecked: !this.state.isChecked }));
        if(this.state.isChecked === false){
            const roomOrder = //this variable has all the rooms in an array;
            this.setState({selectedRooms: roomOrder}); 
        }else{
            this.setState({selectedRooms : []}); 
        }
    }

    render() {
        return (
           <Modal.Footer>
                <Checkbox onChange={this.toggleChecked}> Select All Rooms </Checkbox>
           <Modal.Footer> 
      )
     }```

Answer 1

状态更改后您无法检查 setState 更改，请尝试回调方式，这应该适用于您的情况。

您可以浏览文档以获取更多详细信息。

 toggleChecked() {
        this.setState({ isChecked: !this.state.isChecked }, ()=>{
            if(this.state.isChecked === false){
            const roomOrder = //this variable has all the rooms in an array;
            this.setState({selectedRooms: roomOrder}); 
        }else{
            this.setState({selectedRooms : []}); 
        }
      });
}

Answer 2

你可以

这样做，

toggleChecked() {
   if(!this.state.isChecked){
     const roomOrder = //this variable has all the rooms in an array;
     this.setState({selectedRooms: roomOrder, isChecked: !this.state.isChecked}); 
   }else{
     this.setState({selectedRooms : [], isChecked: !this.state.isChecked}); 
   }
}