在反应中使用`useState`时出现意外的关键字'true'？答案

【问题标题】：Unexpected keyword 'true' while using `useState` in react?在反应中使用`useState`时出现意外的关键字'true'？
【发布时间】：2020-11-04 06:24:19
【问题描述】：

在这里，当用户单击它时，我尝试将 MUIDrawer 的 open 属性设置为 true，但在设置 state 时，我收到错误“意外关键字'true'”

import React, { useState } from "react";
import { withRouter } from "react-router-dom";
import {
  Drawer as MUIDrawer,
  ListItem,
  List,
  ListItemIcon,
  ListItemText,
  AppBar,
  Toolbar,
  IconButton
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
import MenuIcon from "@material-ui/icons/Menu";

const useStyles = makeStyles({
  drawer: {
    width: "190px"
  }
});

const Drawer = props => {
  const { history } = props;
  const classes = useStyles();
  const itemsList = [
    {
      text: "Home",
      icon: <InboxIcon />,
      onClick: () => history.push("/")
    },
    {
      text: "About",
      icon: <MailIcon />,
      onClick: () => history.push("/about")
    },
    {
      text: "Contact",
      icon: <MailIcon />,
      onClick: () => history.push("/contact")
    }
  ];

  

  [state, setState] = useState(false);
  
  const toggleDrawer = {setState(true)}

  return (
    <>
      <AppBar>
        <Toolbar>
          <IconButton
            style={{ position: "absolute", right: "0" }}
            onClick={toggleDrawer}
          >
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
      <MUIDrawer
        className={classes.drawer}
        open={state}
      >
        <List>
          {itemsList.map((item, index) => {
            const { text, icon, onClick } = item;
            return (
              <ListItem button key={text} onClick={onClick}>
                {icon && <ListItemIcon>{icon}</ListItemIcon>}
                <ListItemText primary={text} />
              </ListItem>
            );
          })}
        </List>
      </MUIDrawer>
    </>
  );
};

export default withRouter(Drawer);

【问题讨论】：

toggleDrawer 应该被声明为一个函数。
在声明 useState 挂钩时，您还忘记了 const 关键字。 const [state, setState] = useState(false)
谢谢，我真的认为这是一个功能

标签： javascript reactjs material-ui react-lifecycle-hooks

【解决方案1】：

尝试将toggleDrawer 声明为函数，如下所示：

const toggleDrawer = () => setState(true)

【讨论】：

【解决方案2】：

错误在：

  [state, setState] = useState(false);
  
  const toggleDrawer = {setState(true)}

首先你忘记了 useState 钩子中的 const 关键字。

  const [state, setState] = useState(false);

toggleDrawer 必须是一个函数，你可以这样做：

const toggleDrawer = () => {setState(true)}

或

function toggleDrawer(){
   setState(true)
}

如果你愿意，你可以在onClick里面做这个函数：

<IconButton
   style={{ position: "absolute", right: "0" }}
   onClick={()=>{setState(true)}}
>

最后，如果你想再次点击它时让它为假：

<IconButton
   style={{ position: "absolute", right: "0" }}
   onClick={()=>{setState(!state)}}
>

在最后一种情况下，setState(!state) 将允许您保存相反的状态。

然后，对于您进行的每一次点击，状态值都会更改为与之前的值相反的值。

【讨论】：