无法通过自定义反应钩子更新状态

Question

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

这是我用来返回抽屉和按钮的自定义钩子

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

然后，我尝试通过我在 Header 中使用的 Toggle 按钮更新状态。这是我的标题

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;

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

这里是沙盒 https://codesandbox.io/s/customhooksnotupdatingstate-d7mfz?file=/src/components/Drawer/useTemporaryDrawer.js

Answer 1

如果我有 2 个组件：A 和 B，并且每个组件都有 setState 挂钩来更新变量 state，那么您不会期望 A 中的 setState('a') 与 B 中的 state 有任何区别，你会？但是随后您创建了 2 个组件，每个组件都有其独立的状态，并期望以某种方式共享这些状态。 Toggle in Header 会更改 Header 的状态，而 Dashboard 中的 Drawer 无法看到这些更改。作为一个选项，您可以将 Toggler 作为道具传递给标题

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