Edited at

React.js で setState が undefined

More than 1 year has passed since last update.

備忘録。

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)