React： 'this.state'はコンポーネント関数内では定義されていません

Question

コンポーネント内の関数でthis.stateにアクセスする際に問題があります。私はすでにSO上this質問を発見し、私のコンストラクタに提案されたコードを追加しました：それはまだ動作しません

class Game extends React.Component { 

    constructor(props){ 
    super(props); 
    ... 
    this.state = {uid: '', currentTable : '', currentRound : 10, deck : sortedDeck}; 
    this.dealNewHand = this.dealNewHand.bind(this); 
    this.getCardsForRound = this.getCardsForRound.bind(this); 
    this.shuffle = this.shuffle.bind(this); 
    } 

    // error thrown in this function 
    dealNewHand(){ 
    var allCardsForThisRound = this.getCardsForRound(this.state.currentRound); 
    } 

    getCardsForRound(cardsPerPerson){ 
    var shuffledDeck = this.shuffle(sortedDeck); 
    var cardsForThisRound = []; 
    for(var i = 0; i < cardsPerPerson * 4; i++){ 
     cardsForThisRound.push(shuffledDeck[i]); 
    } 
    return cardsForThisRound; 
    } 

    shuffle(array) { 
    ... 
    } 

    ... 
    ... 

。 this.state.currentRoundは未定義です。何が問題ですか？

Answer 1

私はうまくいきました。この方法あなたの関数を書く

this.getCardsForRound = this.getCardsForRound.bind(this, this.state.currentRound); 

Answer 2

：私はにコンストラクタでgetCardsForRoundを結合するためのコードを変更し

dealNewHand =() => { 
    var allCardsForThisRound = 
    this.getCardsForRound(this.state.currentRound); 
} 
getCardsForRound = (cardsPerPerson) => { 
    var shuffledDeck = this.shuffle(sortedDeck); 
    var cardsForThisRound = []; 
    for(var i = 0; i < cardsPerPerson * 4; i++){ 
     cardsForThisRound.push(shuffledDeck[i]); 
    } 
    return cardsForThisRound; 
} 

http://www.react.express/fat_arrow_functions

が、これは同じ外であるキーワードに対して結合し、太い矢印の機能の中で。これは、functionで宣言された関数とは異なります。これは、呼び出し時にこれを別のオブジェクトにバインドできます。このバインディングのメンテナンスは、マッピングなどの操作にとって非常に便利です：this.items.map（x => this.doSomethingWith（x））。