无法在类组件中调用 React Hook“useState”。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用

Question

我是 React Frontend 开发的新手。我正在尝试向我的 Material-UI NavBar 添加一个临时抽屉。我在我的代码中添加了一个抽屉：

 class Navbar extends Component {
    render() {
        const { authenticated } = this.props;
        const [open, setOpen] = useState(false);
        const handleDrawer = () =>{
           setOpen(true)
        }
        return (
            <AppBar position="fixed">
                <Toolbar className="nav-container">
                    {authenticated ? (
                        <Fragment>
                            <IconButton edge="start" onClick={handleDrawer} >
                                <Menu/>
                            </IconButton>
                            <Drawer
                                anchor='left'
                                open={open}
                                onClose={()=> setOpen(false)}
                                >
                                    <h3> Drawer</h3>
                            </Drawer>
                            <NewPost/>
                            <Link to="/">
                                <MyButton tip="Home">
                                    <HomeIcon color = "disabled"/>
                                </MyButton>
                            </Link>
                            <Link to="/chats">
                                <MyButton tip="Chats">
                                    <ChatIcon color = "disabled"/>
                                </MyButton>
                            </Link>
                            <Notifications />
                        </Fragment>


                    ):(
                        <Fragment>
                            <Button color="inherit" component={Link} to="/login">Login</Button>
                            <Button color="inherit" component={Link} to="/signup">Singup</Button>
                            <Button color="inherit" component={Link} to="/">Home</Button>
                            {/* <Button color="inherit" component={Link} to="/user">Profile</Button>*/}
                        </Fragment>
                    )}
                </Toolbar>
            </AppBar>


        )
    }
}

Navbar.propTypes = {
    authenticated:  PropTypes.bool.isRequired
}

const mapStateToProps = state =>({
    authenticated: state.user.authenticated
})

export default connect(mapStateToProps)(Navbar)

但是出现了这个错误：

 React Hook "useState" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function

所以，我创建了一个构造函数来处理这个（在渲染之前）：

 constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

当我想改变状态时，我使用：

 this.setState({ open: true })

但是，当我触发抽屉（单击按钮）时，它不会打开。我能做些什么？

原文由 Loki00 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

状态挂钩 (useState) 可用于功能性 React 组件，但在您的情况下，您使用的是类组件。功能性 React 组件通常没有开箱即用的状态，但是 useState 是一个新功能，可以让你解决这个问题

您可以将其更改为功能组件，也可以将其保留为类组件并以不同方式使用状态，例如：

• !this.state.open 代替 !open 和
• this.setState({open: false}) 代替 setOpen(false)

https://reactjs.org/docs/hooks-state.html

原文由 yannicuLar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将此行 const [open, setOpen] = useState(false); 更改为 this.state = { open: false };

当设置为 true 时，只需调用 this.setState({ open: this.state.open: true })

原文由 Kandonga 发布，翻译遵循 CC BY-SA 4.0 许可协议