React Hook“useState”無法在 class 組件中調用。 React Hooks 必須在 React function 組件或自定義 React Hook function 中調用

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
    };
  }

當我想更改 state 時，我使用了：

this.setState({ open: true })

但是，當我觸發抽屜（單擊按鈕）時，它不會打開。 我能做什么？

Answer 1

state 掛鈎 (useState) 可用於功能性 React 組件，但在您的情況下，您使用的是 Class 組件。 功能性 React 組件通常沒有開箱即用的狀態，但useState是一個新功能，可以讓你解決這個問題

您可以將其更改為功能組件，或者將其保留為 class 組件並以不同方式使用 state 例如：

• .this.state.open而不是!open和
• this.setState({open: false})而不是setOpen(false)

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

Answer 2

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

當設置為 true 時，只需調用this.setState({ open: this.state.open: true })

Answer 3

您必須使用功能組件。 目前你的組件是一個 class 組件，所以你應該有這樣的東西：

const Navbar = (props) => {
  const { authenticated } = props;
  const [open, setOpen] = useState(false);
  const handleDrawer = () =>{
    setOpen(true)
  }
    
  return (
    <AppBar position="fixed">...</AppBar>
  );
};

我還注意到您的 class 組件在 render 方法中定義了 state 部分。 當使用 class 組件時，應該在constructor中定義 state ，否則你的 state 將在每次渲染時被覆蓋。

Answer 4

功能組件而不是 class 組件怎么樣？ 如您所知，建議使用功能組件。 我認為它很容易編寫代碼並且可以提高性能。

const Navbar = () => {
     //useState, define functions here
     return (//the same as render method of your class component) 
}

Answer 5

使用function Navbar(props)代替class Navbar extends Component

這是因為，有一條規則：React Hook“useState”不能在class component中調用，例如class Navbar extends Component 。 React Hooks 必須在React function component中調用，例如function Navbar(props)或自定義 React Hook function