类型“void”不可分配给类型“(event: MouseEvent<HTMLDivElement, MouseEvent>) => void”

Question

我怎么了，你能告诉我2做了什么吗？

我正在创建一个需要钩子来替换状态的网站。我在我的index.js 上。错误发生在菜单内 div 内的 onClicks 上。菜单来自material-UI

我的代码：

import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

export default function SimpleMenu() {
    const [ anchorEl, setAnchorEl ] = React.useState<null | HTMLElement>(null);
    const [ language, setLanguage ] = useState('English');
    const languages = [ 'English', 'Chinese ( Simplified )', 'Chinese ( Traditional )' ];

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = (word: string) => {
        setLanguage(word);
    };

    return (
        <div>
            <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
                Open Menu
            </Button>
            <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
                <div onClick={handleClose(languages[0])}>{languages[0]}</div>
                <div onClick={handleClose(languages[1])}>{languages[1]}</div>
                <div onClick={handleClose(languages[2])}>{languages[2]}</div>
            </Menu>
        </div>
    );
}


----------


error:

```Type 'void' is not assignable to type '(event: MouseEvent<HTMLDivElement, MouseEvent>) => void'.```

can u please help me?

( bottom is gibberish )

Answer 1

改成onClick={handleClose(languages[0])}这样的箭头函数

onClick={() => handleClose(languages[0])}

或者更改handleClose函数

const handleClose = () => (word: string) => {
    setLanguage(word);
};