收到错误：React JS中的无效钩子调用

Question

我正在使用Material ui，并且当我使用下拉菜单组件而不是出现错误错误：无效的挂钩调用时，我正在使用与material-ui框架进行交互

import React, { Component, Fragment } from 'react';
import {Header, Footer} from '../Layouts'
import {Container, Paper, Grow, Popper, Grid, Button, MenuList, ClickAwayListener, MenuItem,  TableContainer, Table, TableHead, TableRow, TableCell, TableBody, makeStyles, Theme, createStyles, fade} from '@material-ui/core'
import CreateDialogAddScrip from '../Admin/Addscrip';
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    grow: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'block',
      },
    },
    search: {
      position: 'relative',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      '&:hover': {
        backgroundColor: fade(theme.palette.common.white, 0.25),
      },
      marginRight: theme.spacing(2),
      marginLeft: 0,
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(3),
        width: 'auto',
      },
    },
    searchIcon: {
      padding: theme.spacing(0, 2),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 0),
      // vertical padding + font size from searchIcon
      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: '20ch',
      },
    },
    sectionDesktop: {
      display: 'none',
      [theme.breakpoints.up('md')]: {
        display: 'flex',
      },
    },
    sectionMobile: {
      display: 'flex',
      [theme.breakpoints.up('md')]: {
        display: 'none',
      },
    },
  }),
);
function App() {
  return (
    <Container>
      <div>
        <Admin />
      </div>
    </Container>
  );
}
  export default App;

class Admin extends Component {

  render() {

    const classes = useStyles();
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState<null | HTMLElement>(null);

    const isMenuOpen = Boolean(anchorEl);
    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
    const [open, setOpen] = React.useState(false);
    const anchorRef = React.useRef<HTMLButtonElement>(null);

    const handleToggle = () => {
      setOpen((prevOpen) => !prevOpen);
    };


    const handleClose = (event: React.MouseEvent<EventTarget>) => {
      if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
        return;
      }

      setOpen(false);
    };

    function handleListKeyDown(event: React.KeyboardEvent) {
      if (event.key === 'Tab') {
        event.preventDefault();
        setOpen(false);
      }
    }

    // return focus to the button when we transitioned from !open -> open
    const prevOpen = React.useRef(open);
    React.useEffect(() => {
      if (prevOpen.current === true && open === false) {
        anchorRef.current!.focus();
      }

      prevOpen.current = open;
    }, [open]);




    const handleProfileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
      setAnchorEl(event.currentTarget);
    };

    const handleMobileMenuClose = () => {
      setMobileMoreAnchorEl(null);
    };

    const handleMenuClose = () => {
      setAnchorEl(null);
      handleMobileMenuClose();
    };

    const handleMobileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
      setMobileMoreAnchorEl(event.currentTarget);
    };





    return (
    <Container maxWidth="xl" >
        <Header/>

        <Container maxWidth="lg" className="innerContainer">
        <CreateDialogAddScrip/>

        <Grid container className="listContainer">
          <Fragment>
          <TableContainer>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell align="left">Category</TableCell>
            <TableCell align="left">Exchange</TableCell>
            <TableCell align="left">Scrip</TableCell>
            <TableCell align="left">CMP</TableCell>
            <TableCell align="left">Entry Price</TableCell>
            <TableCell align="left">Target Price</TableCell>
            <TableCell align="left">Stop Loss</TableCell>
            <TableCell align="left">Last Return Percentage</TableCell>
            <TableCell align="left">Return Time Frame</TableCell>
            <TableCell align="left">Retutn In</TableCell>
            <TableCell align="left">Date</TableCell>
            <TableCell align="left">Time</TableCell>
            <TableCell align="left"></TableCell>
          </TableRow>
        </TableHead>
        <TableBody>

            <TableRow >
              <TableCell align="left">Last Minute Deals</TableCell>
              <TableCell align="left">BSE</TableCell>
              <TableCell align="left">Reliance</TableCell>
              <TableCell align="left">1065</TableCell>
              <TableCell align="left">1050</TableCell>
              <TableCell align="left">1120</TableCell>
              <TableCell align="left">1170</TableCell>

              <TableCell align="left">10%</TableCell>
              <TableCell align="left">90</TableCell>
              <TableCell align="left">Days</TableCell>
              <TableCell align="left">21-12-2020</TableCell> 
              <TableCell align="left">10:00 AM</TableCell>             
              <TableCell align="left">        
              <Button size="small" className="FormBtn" >
              <div>
        <Button
          ref={anchorRef}
          aria-controls={open ? 'menu-list-grow' : undefined}
          aria-haspopup="true"
          onClick={handleToggle}
        >
          Govind@invest19
        </Button>
        <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
          {({ TransitionProps, placement }) => (
            <Grow
              {...TransitionProps}
              style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
            >
              <Paper>
                <ClickAwayListener onClickAway={handleClose}>
                  <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
                    <MenuItem onClick={handleClose}>Logout</MenuItem>
                  </MenuList>
                </ClickAwayListener>
              </Paper>
            </Grow>
          )}
        </Popper>
      </div>
              </Button>
        </TableCell>
            </TableRow>

        </TableBody>
      </Table>
    </TableContainer>
        </Fragment>
        </Grid>
      </Container>
      <Footer/>
      </Container>
    );
}
}

Answer 1

根据Rules of Hooks，挂钩只能在顶级反应功能组件上调用，即不能在嵌套功能块，条件块或类中调用，而只能作为顶级功能组件调用。只需将您在 Admin 类中的实现移动到功能组件，它将正常工作。

功能组件中的Admin类如下：

interface AdminProps {}


function Admin(props: AdminProps) {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const [
    mobileMoreAnchorEl,
    setMobileMoreAnchorEl
  ] = React.useState<null | HTMLElement>(null);

  const isMenuOpen = Boolean(anchorEl);
  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef<HTMLButtonElement>(null);

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = (event: React.MouseEvent<EventTarget>) => {
    if (
      anchorRef.current &&
      anchorRef.current.contains(event.target as HTMLElement)
    ) {
      return;
    }

    setOpen(false);
  };

  function handleListKeyDown(event: React.KeyboardEvent) {
    if (event.key === 'Tab') {
      event.preventDefault();
      setOpen(false);
    }
  }

  // return focus to the button when we transitioned from !open -> open
  const prevOpen = React.useRef(open);
  React.useEffect(() => {
    if (prevOpen.current === true && open === false) {
      anchorRef.current!.focus();
    }

    prevOpen.current = open;
  }, [open]);

  const handleProfileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMobileMenuClose = () => {
    setMobileMoreAnchorEl(null);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
    handleMobileMenuClose();
  };

  const handleMobileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
    setMobileMoreAnchorEl(event.currentTarget);
  };

  return (
    <Container maxWidth="xl">
      <Header />

      <Container maxWidth="lg" className="innerContainer">
        <CreateDialogAddScrip />

        <Grid container className="listContainer">
          <Fragment>
            <TableContainer>
              <Table aria-label="simple table">
                <TableHead>
                  <TableRow>
                    <TableCell align="left">Category</TableCell>
                    <TableCell align="left">Exchange</TableCell>
                    <TableCell align="left">Scrip</TableCell>
                    <TableCell align="left">CMP</TableCell>
                    <TableCell align="left">Entry Price</TableCell>
                    <TableCell align="left">Target Price</TableCell>
                    <TableCell align="left">Stop Loss</TableCell>
                    <TableCell align="left">Last Return Percentage</TableCell>
                    <TableCell align="left">Return Time Frame</TableCell>
                    <TableCell align="left">Retutn In</TableCell>
                    <TableCell align="left">Date</TableCell>
                    <TableCell align="left">Time</TableCell>
                    <TableCell align="left"></TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  <TableRow>
                    <TableCell align="left">Last Minute Deals</TableCell>
                    <TableCell align="left">BSE</TableCell>
                    <TableCell align="left">Reliance</TableCell>
                    <TableCell align="left">1065</TableCell>
                    <TableCell align="left">1050</TableCell>
                    <TableCell align="left">1120</TableCell>
                    <TableCell align="left">1170</TableCell>

                    <TableCell align="left">10%</TableCell>
                    <TableCell align="left">90</TableCell>
                    <TableCell align="left">Days</TableCell>
                    <TableCell align="left">21-12-2020</TableCell>
                    <TableCell align="left">10:00 AM</TableCell>
                    <TableCell align="left">
                      <Button size="small" className="FormBtn">
                        <div>
                          <Button
                            ref={anchorRef}
                            aria-controls={open ? 'menu-list-grow' : undefined}
                            aria-haspopup="true"
                            onClick={handleToggle}
                          >
                            Govind@invest19
                          </Button>
                          <Popper
                            open={open}
                            anchorEl={anchorRef.current}
                            role={undefined}
                            transition
                            disablePortal
                          >
                            {({ TransitionProps, placement }) => (
                              <Grow
                                {...TransitionProps}
                                style={{
                                  transformOrigin:
                                    placement === 'bottom'
                                      ? 'center top'
                                      : 'center bottom'
                                }}
                              >
                                <Paper>
                                  <ClickAwayListener onClickAway={handleClose}>
                                    <MenuList
                                      autoFocusItem={open}
                                      id="menu-list-grow"
                                      onKeyDown={handleListKeyDown}
                                    >
                                      <MenuItem onClick={handleClose}>
                                        Logout
                                      </MenuItem>
                                    </MenuList>
                                  </ClickAwayListener>
                                </Paper>
                              </Grow>
                            )}
                          </Popper>
                        </div>
                      </Button>
                    </TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </TableContainer>
          </Fragment>
        </Grid>
      </Container>
      <Footer />
    </Container>
  );
}

Answer 2

您只是不能在Class Component内部使用Hooks。 使您的组件正常运行，然后它将正常工作