javascript - 为什么在使用 reactjs 挂钩时出现“TypeError:react__WEBPACK_IMPORTED_MODULE_1___default.a.useState 不是函数”错误?
问题描述
我正在尝试直接从 Material Ui(简单菜单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 dispatcher.useState is not a function when using 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;
解决方案
虽然我不确定上面的代码有什么问题(我的猜测是使用材料 UI 的非发布版本,其中导出不是默认的,因为它的文档状态),这个错误发生在我不正确的导入。我的问题是我试图
import someNonDefaultFunction from 'someModule';
在命名/非默认导入周围添加大括号为我解决了相同的错误消息:
import {someNonDefaultFunction} from 'someModule';
推荐阅读
- javascript - 在 jQuery 块内时函数不起作用
- javascript - 如何在不使用道具作为初始状态的情况下对 Gatsby 中的一组项目进行洗牌?
- repast-simphony - repastpy 是如何设置和启动的?
- c# - Xamarin Forms 中条目的水平放置是否存在任何已知问题?
- c# - 我的 DevComponents.Dotnetbars.Controls 上有一个错误,它们没有放在表单上
- spring - 如何在 Spring Webflux 中使用 @RequestBody 并避免 IllegalStateException?
- html - 如何在 css(HTML) 中定义换行符
- javascript - 基本函数与匿名函数
- c# - 如何模拟表达式
>> 使用喜欢 It.Is >> - python - scrapy shell如何爬取特定网站