TSX + React：未捕获的类型错误：无法读取 Menu.handleClick 处未定义的属性“setState”答案

【问题标题】：TSX + React: Uncaught TypeError: Cannot read property 'setState' of undefined at Menu.handleClickTSX + React：未捕获的类型错误：无法读取 Menu.handleClick 处未定义的属性“setState”
【发布时间】：2017-11-23 02:06:09
【问题描述】：

我正在使用 typescript@2.6.1 和 react 和 react-dom @15.6.2。

我似乎无法调试此问题：未捕获的类型错误：无法读取 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);

PS：当我执行this.handleClick.bind(this) 时，我收到另一个错误：GET file:///Users/kalpa/Desktop/monaco-sample/vs/loader.js net::ERR_FILE_NOT_FOUND ...我正在使用 webpack @3.8 .1

【问题讨论】：

标签： reactjs typescript jsx

【解决方案1】：

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

public handleClick(): void {

到

public handleClick = (): void => {

箭头函数：https://basarat.gitbooks.io/typescript/docs/arrow-functions.html

【讨论】：

【解决方案2】：

您在句柄单击时缺少绑定。所以从

onClick={this.handleClick}

到

onClick={this.handleClick.bind(this)}

重新格式化的代码：

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

【讨论】：

当我这样做时，我得到另一个错误：GET file:///Users/kalpa/Desktop/monaco-sample/vs/loader.js net::ERR_FILE_NOT_FOUND ...我正在使用 webpack @ 3.8.1
您也错误地使用了函数 setState。它需要一个您正在发送函数的对象。如果要在 setState 之后使用函数，可以使用 setState({prevState: prevState}).then(yourfunction);
我没听懂。你能写一个答案吗？

更多