反应 useState 崩溃答案

【问题标题】：React useState crashes反应 useState 崩溃
【发布时间】：2019-01-17 07:39:49
【问题描述】：

我正在尝试使用ASP.net core 2.1、Typescript 3.2.1、material-ui 3.8.3 和React 16.7.0 实现一个简单的菜单。当我运行应用程序时，它在useState 的行上崩溃，错误为TypeError: react__WEBPACK_IMPORTED_MODULE_1___default.a.useState is not a function。

import React from 'react';
import { Link } from 'react-router-dom';
import { withStyles } from '@material-ui/core/styles'
import IconButton from '@material-ui/core/IconButton'
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import MenuIcon from '@material-ui/icons/Menu'

function TopbarMenu(props: any) {
    const { classes } = props
    const [anchorEl, setAnchorEl] = React.useState(null); // Crashes here. Compiled line becomes: var _React$useState = react__WEBPACK_IMPORTED_MODULE_1___default.a.useState(null),

    function handleClick(event: any) {
        console.log(event.currentTarget)
        setAnchorEl(event.currentTarget);
    }

    function handleClose() {
        setAnchorEl(null);
    }

    return (
        <div>
            <IconButton onClick={handleClick} className={classes.menuButton} color="inherit" aria-label="Menu">
                <MenuIcon />
            </IconButton>
            <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
                <MenuItem onClick={handleClick}><Link to={'/orderform'}>Orderform</Link></MenuItem>
                <MenuItem onClick={handleClick}><Link to={'/products'}>Products</Link></MenuItem>
                <MenuItem onClick={handleClick}><Link to={'/customers'}>Customers</Link></MenuItem>
                <MenuItem onClick={handleClick}><Link to={'/licenses'}>Expiring Licenses</Link></MenuItem>
            </Menu>
        </div>
    );
}

const styles = {
    menuButton: {
        marginLeft: -12,
        marginRight: 20,
    },
}

export default withStyles(styles)(TopbarMenu)

我在这里错过了什么？

我正在关注在此处找到的 material-ui 文档：https://material-ui.com/demos/menus/#simple-menu

【问题讨论】：

标签： asp.net reactjs typescript material-ui react-hooks

【解决方案1】：

编辑

旁注：始终在 React 函数的顶层使用 Hooks。

见rules of hooks

    //Not that bad
    const { classes } = props
    const [anchorEl, setAnchorEl] = React.useState(null);

    //Preferably (in my opinion)
    const [anchorEl, setAnchorEl] = React.useState(null); 
    const { classes } = props

回答

React Hooks 可从 React 16.7.0-alpha，reactconf2018 获得。现已在React v16.8.0-alpha.0. 提供

【讨论】：

谢谢。我刚刚阅读了 react 更新日志，发现 16.7.0 中没有发布钩子
您似乎误解了文档。它们应始终位于顶层并具有相同的调用顺序。我没有看到它提到他们“应该先来”。也许他们稍后删除了该声明？

【解决方案2】：

试试这个

const [anchorEl, setAnchorEl] = React.useState<Element|null>(null);

【讨论】：