作業メモ
ReactでStateの状態を変更しようとsetStateを呼び出す。
TypeError: Cannot read property 'setState' of undefined
エラーが出た、setStateが存在しないなんてありえない。
エラーの出たコード
class App extends Component {
constructor() {
super();
this.state = {
btnState: false
};
}
handleClick() {
this.setState({
btnState: !this.state.btnState
});
}
render() {
return(
<div>
<p>{this.state.btnState ? "true" : "false"}</p>
<button onClick={this.handleClick}>BTN</button>
</div>
);
}
}
handleClick()のthis.setStateでundefinedが発生。
thisが参照できていないみたい。
原因
継承を使いClassで定義したReactコンポーネントはthisがバインドされない仕様のようだ。
メソッド内でthisを使用するには2つ方法があるようだ。
解決方法
bindする
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
this.state = {
btnState: false
};
}
bindでthisをメソッドに渡す。
アロー関数
handleClick = () => {
this.setState({
btnState: !this.state.btnState
});
}
メソッドをアロー演算子で定義する。
まとめ
- 継承してClass定義したReactコンポーネントはthisがバインドされない
- bindする
- アロー関数で定義する
そういえばES2015で追加されたアロー関数でthisがなんやかんやってあったな。
ちゃんと調べておこうかな。