エラー：未定義のプロパティ「setState」を読み取ることができません

Reactコンポーネントを最初に書き始めたとき、途中でいくつかの異なるエラーが発生する可能性があります。このようなエラーの2つは、「未定義のプロパティ「setState」を読み取れません」と「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」キーワードはこのインスタンスのウィンドウを参照します。詳細を確認するために、console.log（this）をhandleChangeメソッドの最初の行とレンダリングの最初の行の両方に追加しましょう。

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」キーワードがアプリを指していることがわかります。入力を使用しようとすると、画面にエラーが表示されますが、コンソールを見ると、そこにある「this」キーワードがアプリではなくウィンドウオブジェクトを参照していることがわかります。この問題を解決するには、次の2つの方法があります。

1。メソッドをバインドする

コンストラクター内で、状態オブジェクトの後に、次の行を入力します：

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

この行は、「this」キーワードをhandleChangeメソッドにバインドするため、handleChangeを呼び出すときにAppコンポーネントを明示的に参照できます。それ以外の場合、メソッドは、使用するコンポーネントを認識または認識しません。

2。 ES6矢印機能

大きな矢印関数にはES6構文を使用します。 「this」キーワードをそのメソッドに自動的にバインドするため、コンストラクターでバインドする必要はありません。

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

あります！これが、Reactでクラスコンポーネント構造を使用するときに「this.setState」が「未定義」または「関数ではない」エラーを取り除く方法です。将来これらのエラーを防ぎたい場合は、代わりにReactフックで機能コンポーネントを使用するようにReactコンポーネントをリファクタリングしてください！

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。