Reactjs TSX&x2B；反应：未捕获类型错误：无法读取属性'；设置状态'；未定义在Menu.handleClick处的值

我正在使用typescript@2.6.1并在15.6.2下反应和反应dom

我似乎无法调试此问题： 未捕获类型错误：无法读取Menu.handleClick上未定义的属性“setState”。 这是在

This.setState（（prevState）=>{

import * as React from "react";
import * as ReactDOM from 'react-dom';

import Monaco from './Monaco';
import shiftOverlayButtons from '../common/shiftOverlayButtons';

export interface Props {

}

export interface State {
    isOpen: boolean;
}

export default class Menu extends React.Component<Props, State> {

    constructor(props: Props) {
        super(props);
    }
    public state: State = {
        isOpen: false
      };

    public render() {
        return <button id="overlay-btn" className="menu-btn" onClick={this.handleClick}></button>
    }

    public handleClick(): void {
        this.setState( (prevState) => {
            if(prevState.isOpen === false){
                this.openMenu();
                return {
                    isOpen: true
                };
            }
            else {
                this.closeMenu();
                return {
                    isOpen: false
                }
            }
        });
    }

    private openMenu(): void {
        shiftOverlayButtons(true);
        ReactDOM.render(<Monaco/>, document.getElementById("overlay"));
    }

    private closeMenu(): void {
        shiftOverlayButtons(false);
        //ReactDOM.unmountComponentAtNode(document.getElementById("overlay"));
    }

}

ReactDOM.render(<Menu/>, document.body);

import*as React from“React”；
从“react dom”导入*作为react dom；
从“/摩纳哥”进口摩纳哥；
从“../common/shiftOverlayButtons”导入shiftOverlayButtons；
导出接口道具{
}
导出接口状态{
等参：布尔；
}
导出默认类菜单扩展了React.Component{
建造师（道具：道具）{
超级（道具）；
}
公共状态：状态={
伊索彭：错
};
公共渲染（）{
返回
}
public handleClick（）：void{
this.setState（（prevState）=>{
if（prevState.isOpen==false）{
这个.openMenu（）；
返回{
伊索彭：是的
};
}
否则{
这是closeMenu（）；
返回{
伊索彭：错
}
}
});
}
私有openMenu（）：void{
shiftoverlay按钮（真）；
render（，document.getElementById（“overlay”）；
}
私有关闭菜单（）：无效{
换档按钮（错误）；
//unmountComponentAtNode（document.getElementById（“覆盖”）；
}
}
render（，document.body）；

---

PS：当我执行

this.handleClick.bind（this）

时，我得到另一个错误：getfile:///Users/kalpa/Desktop/monaco-sample/vs/loader.js net:：ERR_FILE_NOT_FOUND_…我正在使用webpack@3.8.1

您在单击句柄时缺少绑定。因此从

onClick={this.handleClick}

到

重新格式化的代码：

handleClick(event) {
    this.setState({isOpen: !isOpen}).then(()=>{
        if(!this.state.isOpen){
            //do something when false
        } else {
            // do something when true
        }}}

---

更喜欢为处理程序使用箭头函数。更改

public handleClick(): void {

到

更多

---

箭头函数：

当我这样做时，会出现另一个错误：getfile:///Users/kalpa/Desktop/monaco-sample/vs/loader.js net:：ERR_FILE_NOT_FOUND…我正在使用webpack@3.8.1您还错误地使用了函数setState。它接受您正在发送函数的对象。如果您想在setState之后使用函数，可以使用settate（{prevState:prevState}）。然后（你的函数）；我不明白。你能写一个答案吗？

public handleClick(): void {

public handleClick = (): void => {