为什么在使用 reactjs 挂钩时出现“TypeError：react__WEBPACK_IMPORTED_MODULE_1___default.a.useState is not a function”错误？答案

【问题标题】：Why am I getting "TypeError: react__WEBPACK_IMPORTED_MODULE_1___default.a.useState is not a function" error when using reactjs hooks?为什么在使用 reactjs 挂钩时出现“TypeError：react__WEBPACK_IMPORTED_MODULE_1___default.a.useState is not a function”错误？
【发布时间】：2019-01-17 16:00:21
【问题描述】：

我正在尝试直接从 Material Ui (Simple Menu 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'; 然后在 const [anchorEl, setAnchorEl] = React.useState(null); 中去掉 React 使其看起来像：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;

【问题讨论】：

使用最新的 react 的 alpha 版本
@Oscar 我将如何确保这一点？
npm i --save react@next react-dom@next 应该这样做:)
@Oscar 是的，我试过了，但现在我收到 TypeError: Cannot set property 'current' of undefined。
你能显示这个错误指向的行吗？在您提供的代码中，我没有看到任何 current 属性

标签： javascript reactjs debugging react-hooks

【解决方案1】：

虽然我不确定上面的代码有什么问题（我的猜测是使用非发布版本的 material-ui，其中导出不是文档所述的默认值），但这个错误对我来说是不正确的进口。我的问题是我试图

import someNonDefaultFunction from 'someModule';

在命名/非默认导入周围添加大括号为我解决了相同的错误消息：

import {someNonDefaultFunction} from 'someModule';

【讨论】：