React-キャッチされていないTypeError:未定義のプロパティ 'setState'を読み取れません

338
Dangling_pointer 2015-09-01 08:00.

次のエラーが発生します

Uncaught TypeError:未定義のプロパティ 'setState'を読み取れません

コンストラクターでデルタをバインドした後でも。

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta.bind(this);
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

18 answers

486
Davin Tryon 2015-09-01 08:19.

これは、this.deltaにバインドされていないためthisです。

this.delta = this.delta.bind(this)コンストラクターでセットをバインドするには:

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

    this.delta = this.delta.bind(this);
}

現在、bindを呼び出しています。ただし、bindはバインドされた関数を返します。関数をそのバインドされた値に設定する必要があります。

155
Fabien Sa 2015-12-11 12:36.

ES7 +(ES2016)あなたは、実験に使用できる機能バインド構文演算子を::バインドします。これはシンタックスシュガーであり、DavinTryonの答えと同じように機能します。

その後、書き換え可能this.delta = this.delta.bind(this);this.delta = ::this.delta;


ES6 +(ES2015)あなたもES6 +を使用することができる機能ARROW=>使用できるようにします)this

delta = () => {
    this.setState({
        count : this.state.count + 1
    });
}

どうして ?Mozillaドキュメントから:

矢印が機能するまで、すべての新しい関数は独自のこの値を定義していました[...]。これは、オブジェクト指向スタイルのプログラミングでは煩わしいことがわかりました。

矢印関数は、囲んでいるコンテキストのこの値をキャプチャします[...]

30
Tao Wang 2016-06-04 17:17.

ES5クラスとES6クラスの間にはコンテキストの違いがあります。したがって、実装間でも少し違いがあります。

ES5バージョンは次のとおりです。

var Counter = React.createClass({
    getInitialState: function() { return { count : 1 }; },
    delta: function() {
        this.setState({
            count : this.state.count++
        });
    },
    render: function() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta}>+</button>
            </div>
            );
    }
});

これがES6バージョンです。

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count : 1 };
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta.bind(this)}>+</button>
            </div>
            );
    }
}

クラス実装の構文の違いに加えて、イベントハンドラーのバインディングにも違いがあることに注意してください。

ES5バージョンでは、

              <button onClick={this.delta}>+</button>

ES6バージョンでは、次のようになります。

              <button onClick={this.delta.bind(this)}>+</button>
24
Ignatius Andrew 2016-03-16 06:14.

ReactでES6コードを使用する場合、このコンテキストは自動的にバインドされるため、常に矢印関数を使用してください

これを使って:

(videos) => {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

の代わりに:

function(videos) {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};
20
Gabo Ruiz 2018-06-14 07:12.

何もバインドする必要はありません。次のようなArrow関数を使用するだけです。

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1
        };

    }
    //ARROW FUNCTION
    delta = () => {
        this.setState({
            count: this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}
6
Shahrukh Anwar 2018-01-22 07:33.

メソッドを「this」(デフォルトオブジェクト)でバインドする必要があります。したがって、関数が何であれ、コンストラクターでそれをバインドするだけです。

constructor(props) {
    super(props);
    this.state = { checked:false };

    this.handleChecked = this.handleChecked.bind(this);
}

handleChecked(){
    this.setState({
        checked: !(this.state.checked)
    })
}

render(){
    var msg;

    if(this.state.checked){
        msg = 'checked'
    }
    else{
        msg = 'not checked'
    }

    return (
        <div>               
            <input type='checkbox' defaultChecked = {this.state.checked} onChange = {this.handleChecked} />
            <h3>This is {msg}</h3>
        </div>
    );
6
Jaroslav Benc 2018-03-12 23:58.

次のものも使用できます。

<button onClick={()=>this.delta()}>+</button>

または:

<button onClick={event=>this.delta(event)}>+</button>

いくつかのパラメータを渡す場合。

5
Anil 2015-11-17 06:34.

これをコンストラクターにバインドする必要があり、コンストラクターを変更するにはサーバーを再起動する必要があることに注意してください。そうしないと、同じエラーで終了します。

4
hardik chugh 2019-04-11 07:16.

このエラーはさまざまな方法で解決できます-

  • ES5構文を使用している場合は、React jsのドキュメントに従って、bindメソッドを使用する必要があります。

    上記の例では、次のようになります。

    this.delta = this.delta.bind(this)

  • ES6構文を使用している場合は、bindメソッドを使用する必要はなく、次のような方法で実行できます。

    delta=()=>{ this.setState({ count : this.state.count++ }); }

2
Neel Patel 2018-10-24 22:50.

以下に述べるように、このキーワードで新しいイベントをバインドする必要があります...

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta = this.delta.bind(this);
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
      }
    }
2
Emeka Augustine 2019-08-05 15:04.

矢印関数を使用すると、このキーワードのバインドを回避しやすくなります。そのようです:

 delta = () => {
       this.setState({
           count : this.state.count++
      });
   }
2
Mselmi Ali 2019-08-09 22:14.

この問題には2つの解決策があります。

最初の解決策は、コンポーネントにコンストラクターを追加し、次のように関数をバインドすることです。

constructor(props) {
        super(props);

        ...

        this.delta = this.delta.bind(this);
    }

だからこれを行う:

this.delta = this.delta.bind(this); 

これの代わりに:

this.delta.bind(this);

2番目の解決策は、代わりに矢印関数を使用することです。

delta = () => {
       this.setState({
           count : this.state.count++
      });
   }

実際には、矢印関数はそれ自体をバインドしませんthis。矢印関数は字句的にbindそれらのコンテキストなので、this実際には元のコンテキストを参照します

バインド機能の詳細については、以下を参照してください。

バインド関数 JavaScriptを理解するバインド()

矢印関数の詳細については、以下を参照してください。

Javascript ES6 —矢印関数と字句 this

1
Kilo One 2019-01-02 06:51.

バインドステートメントを必要なものから変更するだけです=> this.delta = this.delta.bind(this);

1
Prashant Yalatwar 2019-02-27 00:26.

追加する

onClick = {this.delta.bind(this)}

問題を解決します。このエラーは、ES6クラスの関数を呼び出そうとしたときに発生するため、メソッドをバインドする必要があります。

0
Kai 2017-06-17 22:11.

この質問にはすでに解決策がありましたが、私はそれをクリアするために私のものを共有したいと思います。それが役立つことを願っています:

/* 
 * The root cause is method doesn't in the App's context 
 * so that it can't access other attributes of "this".
 * Below are few ways to define App's method property
 */
class App extends React.Component {
  constructor() {
     this.sayHi = 'hello';
     // create method inside constructor, context = this
     this.method = ()=> {  console.log(this.sayHi) };

     // bind method1 in constructor into context 'this'
     this.method1 = this.method.bind(this)
  }

  // method1 was defined here
  method1() {
      console.log(this.sayHi);
  }

  // create method property by arrow function. I recommend this.
  method2 = () => {
      console.log(this.sayHi);
  }
   render() {
   //....
   }
}
0
Ajay Kumar 2017-12-04 21:54.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

    <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

  </head>
  <body>
  <div id="root"></div>
    <script type="text/babel">

        class App extends React.Component{

            constructor(props){
                super(props);
                this.state = {
                    counter : 0,
                    isToggle: false
                }
            this.onEventHandler = this.onEventHandler.bind(this);   
            }

            increment = ()=>{
                this.setState({counter:this.state.counter + 1});
            }

            decrement= ()=>{
                if(this.state.counter > 0 ){
                this.setState({counter:this.state.counter - 1});    
                }else{
                this.setState({counter:0});             
                }
            }
            // Either do it as onEventHandler = () => {} with binding with this  // object. 
            onEventHandler(){
                this.setState({isToggle:!this.state.isToggle})
                alert('Hello');
            }


            render(){
                return(
                    <div>
                        <button onClick={this.increment}> Increment </button>
                        <button onClick={this.decrement}> Decrement </button>
                        {this.state.counter}
                        <button onClick={this.onEventHandler}> {this.state.isToggle ? 'Hi':'Ajay'} </button>

                    </div>
                    )
            }
        }
        ReactDOM.render(
        <App/>,
        document.getElementById('root'),
      );
    </script>
  </body>
  </html>
0
K23raj 2019-07-05 17:05.
  1. 状態の 確認特定のプロパティを作成したかどうかの状態の確認

this.state = {
            name: "",
            email: ""
            }
            
           
            
this.setState(() => ({ 
             comments: comments          //comments not available in state
             })) 

2. 関数(つまりhandleChange)内でsetStateを実行する場合は、( this)をチェックし、関数がthisにバインドするか、関数が矢印関数であるかをチェックします。

##これを以下の関数にバインドする3つの方法##

//3 ways for binding this to the below function

handleNameChange(e) {  
     this.setState(() => ({ name }))
    }
    
// 1.Bind while callling function
      onChange={this.handleNameChange.bind(this)}
      
      
//2.make it as arrow function
     handleNameChange((e)=> {  
     this.setState(() => ({ name }))
     })
    
//3.Bind in constuctor 

constructor(props) {
        super(props)
        this.state = {
            name: "",
            email: ""
        }
        this.handleNameChange = this.handleNameChange.bind(this)
        }

0
Asgar Ali Khachay 2020-02-06 06:02.

ES5構文を使用している場合は、適切にバインドする必要があります

this.delta = this.delta.bind(this)

あなたは矢印の機能を使用することができますES6、あなたの上を使用している場合と、あなたは使用する必要はありません)(バインドには、

delta = () => {
    // do something
  }

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

グッドジョブ、ESPN

グッドジョブ、ESPN

今日のホワイトハウスの記者会見で、報道官のサラ・ハッカビー・サンダースは、スポーツセンターのホストであるイェメル・ヒルのドナルド・トランプに関する最近のツイートについてコメントするよう求められ、大統領と彼の政策を白人至上主義者として説明した。ヒルは彼女のつぶやきのためにESPNによって公に叱責されました。

アマゾンからのこのレミントンツールセールで髪を整える、スタイルを整える、乾かす、または取り除く

アマゾンからのこのレミントンツールセールで髪を整える、スタイルを整える、乾かす、または取り除く

基本的に頭のあらゆる部分から髪の毛を整えたり、ブロードライしたり、まっすぐにしたり、脱毛したりする必要がある場合は、このレミントンゴールドボックスが最適です。今日だけ、Amazonは、すでに人気のあるShortcut Pro Self-HaircutKitやPearlPro Ceramic Flat Ironのように、グルーミングをはるかに簡単にするヘアツールをマークダウンしています。

カナダの元桂冠詩人が、史上最高の文化の盗用でトゥパックとマヤアンジェロウから盗んだ

カナダの元桂冠詩人が、史上最高の文化の盗用でトゥパックとマヤアンジェロウから盗んだ

トゥパックシャクール(ティムモーゼンフェルダー/ゲッティイメージズ); マヤアンジェロウ(マーティンゴッドウィン/ゲッティイメージズ)移動、テイラースウィフト。ケンドールとカイリーは、必要な数の座席を持っています。

テスラは、ハリケーンイルマによる避難を容易にするために、フロリダでの車両の範囲を拡大しています

テスラは、ハリケーンイルマによる避難を容易にするために、フロリダでの車両の範囲を拡大しています

写真:Tesla Motorsフロリダに住んでいて、Tesla Model S、Model X 60、またはModel 60Dを使用している場合、車の自律性は50 km(約30マイル)高くなります。これは失敗ではなく、ハリケーンイルマによる避難作業を容易にするために会社自身が命じた自治権の一時的な延長です。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language