首頁猿問 React...

React Hook“useState”無法在類組件中調用。

JavaScript

哈士奇WWW 2023-09-28 16:22:33

我是 React 前端開發的新手。我正在嘗試向我的 Material-UI 導航欄添加一個臨時抽屜。我在代碼中添加了一個抽屜：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> )

查看完整描述

5 回答

吃雞游戲

TA貢獻1829條經驗獲得超7個贊

狀態鉤子 (useState) 可用于功能性 React 組件，但在您的情況下，您使用的是類組件。函數式 React 組件通常沒有開箱即用的狀態，但這useState是一個新功能，可以讓您解決這個問題

您可以將其更改為功能組件，也可以將其保留為類組件并以不同的方式使用狀態，例如：

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

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

反對回復 2023-09-28

喵喵時光機

TA貢獻1846條經驗獲得超7個贊

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

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

反對回復 2023-09-28

紅糖糍粑

TA貢獻1815條經驗獲得超6個贊

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

const Navbar = (props) => {

const { authenticated } = props;

const [open, setOpen] = useState(false);

const handleDrawer = () =>{

setOpen(true)

}

return (

);

};

我還注意到您的類組件具有在渲染方法中定義的狀態部分。使用類組件時，應該在constructor中定義狀態，否則每次渲染時您的狀態都會被覆蓋。

反對回復 2023-09-28

幕布斯7119047

TA貢獻1794條經驗獲得超8個贊

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

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

反對回復 2023-09-28

富國滬深

TA貢獻1790條經驗獲得超9個贊

函數組件而不是類組件怎么樣？如您所知，推薦使用功能組件。我認為它很容易編碼并且可以提高性能。

const Navbar = () => {

//useState, define functions here

return (//the same as render method of your class component)

}

反對回復 2023-09-28

5 回答
0 關注
239 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

React Hook“useState”無法在類組件中調用。

React Hook“useState”無法在類組件中調用。

5 回答

添加回答

React Hook“useState”無法在類組件中調用。