Реакция использованияState сбои - PullRequest
Новая
       13

Реакция использованияState сбои

0 голосов
/ 17 января 2019

Я пытаюсь реализовать простое меню с 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)

Что мне здесь не хватает?

Я слежу за документацией материала-пользовательского интерфейса, найденной здесь: https://material -ui.com / demos / menus / # simple-menu

1 Ответ

0 голосов
/ 17 января 2019

Редактировать

Примечания : Всегда использовать крючки на верхнем уровне вашей функции React.

См. правила крючков

    //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, actconf2018 .В настоящее время доступен в React v16.8.0-alpha.0.

...