Я пытаюсь использовать этот компонент прямо из пользовательского интерфейса материалов (простое меню https://material-ui.com/demos/menus/#menus), чтобы отобразить меню. Однако я получаю TypeError: react__WEBPACK_IMPORTED_MODULE_1___default.a.useState is not a function
ошибку с моей текущей попыткой ниже. Я пытался:
import React, { useState } from 'react';
, а затем избавился отReact
внутриconst [anchorEl, setAnchorEl] = React.useState(null);
, чтобы он выглядел так:const [anchorEl, setAnchorEl] = useState(null);
- Я также попытался заменить
null
числом, но все равно получил ту же ошибку.
Примечание. Еще одна попытка установила правильные пакеты и сделала мой файл package.json
следующим образом (Диспетчер TypeError.useState не является функцией при использовании React Hooks):
{
"name": "speedy-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^3.9.0",
"@material-ui/icons": "^3.0.2",
"classnames": "^2.2.6",
"node-sass": "^4.11.0",
"prop-types": "^15.6.2",
"react": "16.7.0-alpha.0",
"react-dom": "16.7.0-alpha.0",
"react-test-renderer": "16.7.0-alpha.0",
"react-scripts": "2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Снимок экрана с ошибкой:
Что я делаю не так и как это исправить?
import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
const SimpleMenu = () => {
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
setAnchorEl(event.currentTarget);
}
function handleClose() {
setAnchorEl(null);
}
return (
<div>
<Button
aria-owns={anchorEl ? 'simple-menu' : undefined}
aria-haspopup="true"
onClick={handleClick}
>
Open Menu
</Button>
<Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</div>
);
};
export default SimpleMenu;
npm i --save react@next react-dom@next
должен это делать :) - person Oscar   schedule 17.01.2019Cannot set property 'current' of undefined
. - person greyskies   schedule 17.01.2019current
в указанном вами коде - person Oscar   schedule 17.01.2019