React.js で setState が undefined

備忘録。

TypeScript + React.js で書いていると

TypeError: Cannot read property 'setState' of undefined

とのエラーが出た。

もとの(エラーが出た)コード

interface IState {
    message: string
}

class App extends React.Component<{}, IState, any> {
    constructor(props: {}) {
        super(props)
        this.state = {
            message: "The button has not been clicked yet."
        }
    }

    public render() {
        return (
            <button onClick={ this.onClickButton }/>
            <p>{ this.message }</p>
        )
    }

    private onClickButton() {
        this.message = "The button has been clicked!"
    }
}

対応

2つ方法があるらしい。

1つめ

bindする

constructor() {
    super(props)
    this.state = {
        message: "The button has not been clicked yet."
    }
    this.onClickButton = this.onClickButton.bind(this)
}

参考: Reactで Uncaught TypeError: Cannot read property 'setState' of undefined と怒られる場合の対処法

2つめ

アロー関数にする

private onClickButton = () => {
    this.setState({
        message: "The button has been clicked!"
    })
}

参考: this.setState is undefined (Stack Overflow)