は未定義の状態を読み取ることができません

Question

以下の方法がありますか？このコードを考えてみます。

this.state = { 
     dates: [ 
     {date: '1st', matches:[]}, 
     {date: '2nd', matches:[]}, 
     {date: '3rd', matches:[]}, 
     {date: '4th', matches:[]}, 
     {date: '5th', matches:[]} 
     ] 
    } 

    addToDates =() => { 
    let dates = this.state.dates; 
    const matches = this.props.matches; 
    matches.forEach(function(match){ 
     dates.forEach(function(date){ 
     if (match.date == date.date){ 
      this.setState({dates: this.state.dates.concat(match)}) 
     } 
     }) 
    }) 
    } 

私は何をしようとしていることは2つの配列を反復処理していると私は日付と同じ日付が一致するものを見つけた場合、私は試合の配列に追加します。

2つの問題は、最初に、2つの配列を比較するのではなく、2つの配列を比較する方が良いでしょうか？ は、第二に、私はカントは私が持っているにもかかわらず、未定義のsetStateを読んでもらう：

this.addToDates = this.addToDates.bind(this) bound it in my constructor. i thought arrow functions solved that scoping too? 

Answer 1

あなたのaddToDate法の矢印の関数を使用する必要があります。矢印関数をクラスプロパティとして使用しているので、実際にコンストラクタにaddToDatesをバインドする必要はありません。

forEachループの矢印機能を使用しないと、this.setStateを使用しているときの値がthisと異なります。

addToDates =() => { 
    let dates = this.state.dates; 
    const matches = this.props.matches; 
    matches.forEach(match =>{ 
    dates.forEach(date =>{ 
     if (match.date == date.date){ 
     this.setState({dates: this.state.dates.concat(match)}) 
     } 
    }); 
}); 

としてMDN

矢印機能まで、すべての新しい機能が厳密モード 関数呼び出しに未定義独自この値 （コンストラクタの場合に新しいオブジェクトを、定義されたあたり、塩基関数が 「オブジェクトメソッド」などと呼ばれる場合はオブジェクト）。これは、オブジェクト指向プログラミングの で迷惑であることが判明しました。 矢印関数は独自にこの関数を作成しません。実行コンテキストを囲む のこの値が使用されます。