Javascript 无法通过自定义react挂钩更新状态

我试图创建一个自定义挂钩，它返回一个自定义抽屉和一个按钮（用来切换抽屉的状态）。我在管理自定义钩子本身的状态

这是我的定制挂钩，用于归还抽屉和按钮

import React from "react";
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import Divider from "@material-ui/core/Divider";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { Button } from "@material-ui/core";

const useStyles = makeStyles({
  list: {
    width: 250
  },
  fullList: {
    width: "auto"
  }
});

export default function useTemporaryDrawer(toggle) {
  const classes = useStyles();

  const [state, setState] = React.useState({
    right: false
  });

  const toggleDrawer = (anchor, open) => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }
    alert("setting");
    setState({ ...state, [anchor]: open });
  };

  const onButtonClick = (e) => {
    toggleDrawer("right", true)(e);
  };

  const Toggler = (
    <Button
      style={{
        marginTop: "10px"
      }}
      onClick={onButtonClick}
      startIcon={<FontAwesomeIcon icon={faBars} style={{ color: "#fff" }} />}
    ></Button>
  );

  const list = (anchor) => (
    <div
      className={clsx(classes.list, {
        [classes.fullList]: anchor === "top" || anchor === "bottom"
      })}
      role="presentation"
      onClick={toggleDrawer(anchor, false)}
      onKeyDown={toggleDrawer(anchor, false)}
    >
      <List>
        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>
              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
            </ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
        {["All mail", "Trash", "Spam"].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>
              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
            </ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );

  const CustomDrawer = (
    <Drawer
      anchor={"right"}
      open={state["right"]}
      onClose={toggleDrawer("right", false)}
    >
      {list("right")}
    </Drawer>
  );

  return {
    CustomDrawer,
    setState,
    state,
    Toggler
  };
}

从“React”导入React；
从“clsx”导入clsx；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/抽屉”导入抽屉；
从“@material ui/core/List”导入列表；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/icons/MoveToInbox”导入收件箱；
从“@material ui/icons/Mail”导入MailIcon；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
从“@fortawesome/free solid svg icons”导入{faBars}”；
从“@material ui/core”导入{Button}”；
const useStyles=makeStyles({
名单：{
宽度：250
},
完整列表：{
宽度：“自动”
}
});
导出默认功能useTemporaryDrawer（切换）{
const classes=useStyles（）；
常量[状态，设置状态]=React.useState({
右：错
});
const-toggleDrawer=（锚定，打开）=>（事件）=>{
如果(
event.type==“keydown”&&
（event.key==“Tab”| | event.key==“Shift”）
) {
返回；
}
警报（“设置”）；
setState（{…状态，[锚定]：打开}）；
};
const onButtonClick=（e）=>{
切换抽屉（“右”，正确）（e）；
};
常数切换器=(
);
常量列表=（锚定）=>(
{[“收件箱”、“星号”、“发送电子邮件”、“草稿”].map（（文本、索引）=>(
{索引%2==0？：}
))}
{[“所有邮件”、“垃圾”、“垃圾邮件”].map（（文本、索引）=>(
{索引%2==0？：}
))}
);
常数CustomDrawer=(
{list（“right”）}
);
返回{
海关发票人，
设定状态，
国家,，
扳机
};
}

然后，我试图通过我在标题中使用的切换按钮来更新状态。这是我的头球

import React from "react";
import styles from "./Header.module.css";
import useTemporaryDrawer from "../Drawer/useTemporaryDrawer";

const Header = (props) => {
  const { Toggler } = useTemporaryDrawer();

  return <div className={styles.headerForApp}>{Toggler}</div>;
};

export default Header;

从“React”导入React；
从“/Header.module.css”导入样式；
从“./Drawer/useTemporaryDrawer”导入useTemporaryDrawer；
常数头=（道具）=>{
const{Toggler}=useTemporaryDrawer（）；
返回{Toggler}；
};
导出默认标题；

当我按下切换按钮时，它会更新状态，但不会更新抽屉的打开属性。简言之，我无法通过切换按钮打开抽屉。请帮忙

这是沙箱

---

如果我有两个组件：A和B，并且每个组件都有

setState

钩子来更新变量

state

，你不会期望A中的

setState（'A'）

对B中的

state

产生任何影响，对吗？然后创建两个组件，每个组件都具有独立的状态，并希望这些状态以某种方式共享。标题中的切换更改了标题的状态，并且仪表板中的抽屉无法看到这些更改。作为一个选项，您可以将切换器作为道具传递到标题

<Header Toggler={Toggler} />
const Header = (props) => {
return <div className={styles.headerForApp}>{props.Toggler}</div>;
};

常数头=（道具）=>{
返回{props.Toggler}；
};