Javascript 使用挂钩将模态类组件转换为功能组件

我正在尝试将的模态类组件转换为带有挂钩的功能组件，但它没有按预期工作。当我点击按钮时，模态出现，但不会消失

这里是类组件

class ModalPage extends Component {
    state = {
        modal8: false
    }

    toggle = nr => () => {
        let modalNumber = 'modal' + nr
        this.setState({
            [modalNumber]: !this.state[modalNumber]
        });
    }

    render() {
        return (
            <MDBContainer>
                <MDBIcon far icon="eye" onClick={this.toggle(8)}>

                </MDBIcon>
                <MDBModal isOpen={this.state.modal8} toggle={this.toggle(8)} fullHeight position="top">
                    <MDBModalHeader toggle={this.toggle(8)}>MDBModal title</MDBModalHeader>
                    <MDBModalBody>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.
                    </MDBModalBody>
                    <MDBModalFooter>
                        <MDBBtn color="secondary" onClick={this.toggle(8)}>Close</MDBBtn>
                        <MDBBtn color="primary">Save changes</MDBBtn>
                    </MDBModalFooter>
                </MDBModal>
            </MDBContainer>
        );
    }
}

export default ModalPage;

class ModalPage扩展组件{
状态={
模态8：假
}
切换=nr=>（）=>{
设modalNumber='modal'+nr
这是我的国家({
[modalNumber]：！this.state[modalNumber]
});
}
render（）{
返回(
模式标题
知识产权是一种权利，是一种精英的权利，是劳动和福利的临时权利
最大的不确定性是最小的不确定性，它的不确定性表现为实验室的不确定性
康塞奎特。
接近
保存更改
);
}
}
导出默认ModalPage；

还有我用钩子试过的东西

const ModalPage = props => {
    const [modal8, setModal8] = useState(false);

    const toggle = nr => () => {
        let modalNumber = 'modal' + nr;
        setModal8({
            [modalNumber]: !modal8[modalNumber]
        });
    }
    return(
        <MDBContainer>
            <MDBIcon far icon="eye" onClick={toggle(8)}>

            </MDBIcon>
            <MDBModal isOpen={modal8} toggle={toggle(8)} fullHeight position="top">
                <MDBModalHeader toggle={toggle(8)}>MDBModal title</MDBModalHeader>
                <MDBModalBody>
                    Lorem ipsum dolor sit amet, consectetur
                </MDBModalBody>
                <MDBModalFooter>
                    <MDBBtn color="secondary" onClick={toggle(8)}>Close</MDBBtn>
                    <MDBBtn color="primary">Save changes</MDBBtn>
                </MDBModalFooter>
            </MDBModal>
        </MDBContainer>
    )
}
export default ModalPage;

const ModalPage=props=>{
const[modal8，setModal8]=useState（false）；
常量切换=nr=>（）=>{
设modalNumber='modal'+nr；
setModal8({
[modalNumber]：！modal8[modalNumber]
});
}
返回(
模式标题
洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图
接近
保存更改
)
}
导出默认ModalPage；

我只需要做

setModal8（！modal8）

我只需要像这样使用

useState

钩子做

setModal8（！modal8）

：

const[modal8，setModal8]=useState（false）；

允许您按如下方式更新状态：

setModal8（真）；

在本例中，您希望切换

modal8

的值。使用not（

！

）操作符可以轻松实现这一点，如下所示：

setModal8（！modal8）；

像这样使用

useState

钩子：

const[modal8，setModal8]=useState（false）；

允许您按如下方式更新状态：

setModal8（真）；

在本例中，您希望切换

modal8

的值。使用not（

！

）操作符可以轻松实现这一点，如下所示：

setModal8（！modal8）；

尝试使用

setModal8（！modal8）

更新状态谢谢，它可以工作！没问题；）如果我提供一个答案，你会

validate

和

upvote

它吗？尝试使用

setModal8（！modal8）

更新状态，谢谢，它可以工作！没问题；）如果我提供一个答案，你会

验证

和

投票

吗？这不会提供问题的答案。若要评论或要求作者澄清，请在其帖子下方留下评论。-@安德烈亚斯：事实上，这是正确的答案。解释可能很弱，但问题是用这个解决的。这并不能提供问题的答案。若要评论或要求作者澄清，请在其帖子下方留下评论。-@安德烈亚斯：事实上，这是正确的答案。解释可能很弱，但问题是用这个解决的。