Reactエラー「未定義のプロパティ 'setState' を読み取れません」の原因と解決方法

Reactコンポーネントを書き始めたばかりの頃、開発者はさまざまなエラーに遭遇しがちです。その中でも特によく見られるのが「Cannot read property 'setState' of undefined（未定義のプロパティ 'setState' を読み取ることができません）」や「this.setState is not a function（this.setState は関数ではありません）」といったエラーです。この記事では、これらのエラーが発生する理由と、具体的な解決方法をわかりやすく解説します。

なぜこのエラーが発生するのか？

これらのエラーの主な原因は、Reactコンポーネント内で使用・呼び出しているメソッドが正しくバインド（紐付け）されていないことです。以下は、エラーが発生するコードの例です（Reactコンポーネント自体は正しくセットアップされているものとします）。

import React from "react";
import "./styles.css";
 
class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     input: ""
   };
 }
 
 handleChange(e) {
   this.setState({[e.target.name]: e.target.value})
 }
 render() {
   console.log(this.state)
   return (
     <div className="App">
       <h1>Sample React Application</h1>
       <input name="input" onChange={this.handleChange} value={this.state.input} type="text" placeholder="Type here..."/>
       <input type="submit" />
     </div>
   );
 }
}
 
export default App;

一見するとこのコードは問題なさそうに見えますが、よく観察すると handleChange メソッドが App クラスにバインドされていません。そのため、この場合「this」キーワードは Window オブジェクトを参照してしまうのです。実際に確認してみましょう。handleChange メソッドの最初の行と、render メソッドの最初の行にそれぞれ console.log(this) を追加してみます。

handleChange(e) {
   console.log(this, "change")
   this.setState({[e.target.name]: e.target.value})
 }

render() {
   console.log(this, "render")
   return (
     <div className="App">
       <h1>Sample React Application</h1>
       <input name="input" onChange={this.handleChange} value={this.state.input} type="text" placeholder="Type here..."/>
       <input type="submit" />
     </div>
   );
 }

アプリケーションを読み込んだ時点でコンソールを確認すると、「this」キーワードは App を参照しています。ところが、入力フィールドを操作しようとすると画面上にエラーが表示され、コンソールを見ると今度は「this」キーワードが App ではなく Window オブジェクトを参照していることがわかります。これは、イベントハンドラとして渡されたメソッドが、コンポーネントとは別のコンテキストで実行されるために起こる現象です。この問題を解決するには、主に2つの方法があります。

方法1：メソッドをバインドする

コンストラクタ内の state オブジェクトの定義後に、次の1行を追加します。

   this.handleChange = this.handleChange.bind(this);

この行によって「this」キーワードが handleChange メソッドに明示的にバインドされ、メソッド呼び出し時に確実に App コンポーネントを参照できるようになります。バインドを行わない場合、メソッドは自分がどのコンポーネントに対して動作すべきかを認識できず、結果として「this」が undefined になってしまうのです。

方法2：ES6のアロー関数を使う

もうひとつの方法は、ES6のアロー関数構文を採用することです。アロー関数は「this」キーワードを自動的にそのメソッド自身にバインドしてくれるため、コンストラクタで手動バインドする必要がありません。

handleChange = (e) => {
   this.setState({[e.target.name]: e.target.value})
 }

この書き方はコードも簡潔になり、バインド忘れによるバグを未然に防げるため、近年のReact開発ではこちらが好まれる傾向にあります。

まとめ

以上が、Reactのクラスコンポーネントを使用する際に発生する「this.setState が undefined」または「not a function」エラーの解消方法です。ポイントは、JavaScriptにおける「this」の挙動とメソッドのバインドを正しく理解することです。なお、将来的にこうしたエラー自体を回避したい場合は、React Hooks を使用した関数コンポーネントへリファクタリングするのも有効な選択肢です。関数コンポーネントでは「this」の概念が存在しないため、今回のようなバインド関連のトラブルに悩まされることはありません。