Компонент AnchorEL недействителен после первого вызова метода

Question

Я сейчас борюсь с anchorRef, и я не совсем уверен, как это работает, потому что я новичок в реакции и никогда не использовал его раньше. Итак, я получаю эту ошибку из пользовательского интерфейса материала в тот момент, когда вызывается метод onClickAway, который просто устанавливает для anchorRef значение null, хотя это предупреждение появляется только один раз после того, как компонент визуализируется впоследствии. Я больше не получаю предупреждения ??? Я пробовал useEffect, чтобы при загрузке компонента он устанавливал значение null, но это не сработало. Любая помощь будет принята с благодарностью.

Failed prop type: Material-UI: the `anchorEl` prop provided to the component is invalid. It should be an HTML element instance or a referenceObject

TableComponent

export default function TestTable() {
  const [data, setData] = useState([
    {
      val1: 'test1',
      val2: 'test2',
      val3: 'test3',
      val4: 'test4',
      val5: 'test5',
    },
    {
      val1: 'test1',
      val2: 'test2',
      val3: 'test3',
      val4: 'test4',
      val5: 'test5',
    },
    {
      val1: 'test1',
      val2: 'test2',
      val3: 'test3',
      val4: 'test4',
      val5: 'test5',
    }
  ]);
  const [open, setOpen] = React.useState(false);
  const [anchorRef, setAnchorRef] = useState(null);

  const handleMenuToggle = (event) => {
    setAnchorRef(event.currentTarget);
    setOpen((prevOpen) => !prevOpen);
  }

  const handleMenuClose = (event) => {
    if (anchorRef) {
      setAnchorRef(null);
    }
    setOpen(false);
  }

  const method1 = () => {
    handleMenuClose()
  }


  return (
    <TableContainer component={Paper}>
      <Table aria-label="bids table" size="small">
        <TableHead>
          <TableRow>
            <TableCell align="left">Header1</TableCell>
            <TableCell align="left">Header2</TableCell>
            <TableCell align="left">Header3</TableCell>
            <TableCell align="left">Header4</TableCell>
            <TableCell align="left">Header5</TableCell>
            <TableCell align="left"></TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
        {data.map((row, index) => (
          <TableRow key={index}>
            <TableCell>{row.val1}</TableCell>
            <TableCell>{row.val2}</TableCell>
            <TableCell>{row.val3}</TableCell>
            <TableCell>{row.val4}</TableCell>
            <TableCell>{row.val5}</TableCell>
            <TableCell className="pr-0"  style={{width: '5%'}}>
              <IconButton aria-label="options"
                          onClick={(e) => handleMenuToggle(e)}>
                <MoreVertIcon />
              </IconButton>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
      </Table>
      <Popper open={open} anchorEl={anchorRef} role={undefined} transition disablePortal>
        {({ TransitionProps, placement }) => (
          <Grow
            {...TransitionProps}
            style={{
              transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
            }}
          >
            <Paper>
              <ClickAwayListener onClickAway={handleMenuClose}>
                <MenuList id="split-button-menu">
                  <MenuItem onClick={method1}>
                    Menu Opt1
                  </MenuItem>
                  <MenuItem onClick={method1}>
                    Menu Opt1
                  </MenuItem>
                  <MenuItem onClick={method1}>
                    Menu Opt3
                  </MenuItem>
                </MenuList>
              </ClickAwayListener>
            </Paper>
          </Grow>
        )}
      </Popper>
    </TableContainer>
  )

Answer 1

anchorEl должно быть Ref . Взгляните на документацию React о хуке useRef