Предупреждение findDomNode - PullRequest
Новая
       71

Предупреждение findDomNode

0 голосов
/ 23 марта 2020

Я пытался создать меню выбора с помощью Material-UI и React 

const SelectLevelButton = forwardRef((props, ref) => {
  const [stateLevel, setStateLevel] = useState({
    level: "Easy"
  });

  const [stateMenu, setStateMenu] = useState({
    isOpen: false
  });

  const openMenuHandler = () => {
    setStateMenu({
      isOpen: true
    });
  };

  const closeMenuHandler = () => {
    setStateMenu({
      isOpen: false
    });
  };

  const buttonRef = useRef();

  console.log(buttonRef.current);

  return (
    <>
      <Menu open={stateMenu.isOpen} anchorEl={buttonRef.current} onClose={closeMenuHandler}>
        <MenuItem>Easy</MenuItem>
        <MenuItem>Normal</MenuItem>
        <MenuItem>Hard</MenuItem>
      </Menu>
      <div ref={buttonRef}>
        <Button onClick={openMenuHandler} color="inherit">{`Level: ${stateLevel.level}`}</Button>
      </div>
    </>
  );
});

export default SelectLevelButton;

но когда я нажимаю на кнопку, чтобы открыть меню в консоли, я получаю это предупреждение: Предупреждение: findDOMNode устарела в StrictMode. findDOMNode был передан экземпляр Transition, который находится внутри StrictMode. Вместо этого добавьте ссылку непосредственно к элементу, на который вы хотите сослаться.

Как я могу это решить?

1 Ответ

0 голосов
/ 23 марта 2020

ссылка anchorEl в Меню не определена, поскольку вы получаете ее из buttonRef.current, неопределенной при запуске. Так что вместо этого он использует findDOMNode. См. Material-UI docs, как получить ссылку перед открытием меню.

Вам нужно изменить свой код следующим образом (не проверено): 

const SelectLevelButton = forwardRef((props, ref) => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [stateLevel, setStateLevel] = useState({
    level: "Easy"
  });

  const [stateMenu, setStateMenu] = useState({
    isOpen: false
  });

  const openMenuHandler = event => {
    setAnchorEl(event.currentTarget);
    setStateMenu({
      isOpen: true
    });
  };

  const closeMenuHandler = () => {
    setStateMenu({
      isOpen: false
    });
  };

  const buttonRef = useRef(); // No need for that

  console.log(buttonRef.current);

  return (
    <>
      <Menu open={stateMenu.isOpen} anchorEl={anchorEl} onClose={closeMenuHandler}>
        <MenuItem>Easy</MenuItem>
        <MenuItem>Normal</MenuItem>
        <MenuItem>Hard</MenuItem>
      </Menu>
      <div ref={buttonRef}>
        <Button onClick={openMenuHandler} color="inherit">{`Level: ${stateLevel.level}`}</Button>
      </div>
    </>
  );
});

export default SelectLevelButton;
...