Warum ist dieser SetState keine Funktion in ComponenDidMount?

Question

Ich versuche, geordnete Daten von Firebase zu holen und setzen Sie ihn highscoreArray angeben, aber es gibt Fehler „nicht definiert ist keine Funktion (Auswertung‚this.setState ({highscoreArray: sortedHighscores})‘)

componentDidMount() { 
    const reference = database.ref("highscores"); 

    // Pushing sorted data to highscoreArray. 
    reference.orderByChild("highscore").limitToLast(3).on("value", function (snapshot) { 
     sortedHighscores = []; 
     snapshot.forEach(function (child) { 
      sortedHighscores.push({ 
       "username": child.val().username, 
       "score": child.val().highscore 
      }); 
     }); 
     sortedHighscores = sortedHighscores.reverse(); 
     console.log("sortedh", sortedHighscores); // fetch success 
     this.setState({highscoreArray: sortedHighscores}); // gives error 
    }); 
} 

Answer 1

Innen function der Rückruf der this einen anderen Kontext entweder eine Pfeil Funktion verwenden, oder eine außerhalb Referenz speichern.

Pfeil:

reference.orderByChild("highscore").limitToLast(3).on("value", (snapshot) => { ... }); 

Answer 2

einer der wichtigsten Vorteile von Pfeilfunktionen ist, dass es diesen Wert nicht besitzt. Dies ist lexikalisch an den umschließenden Geltungsbereich gebunden.

class Logger { 
    dumpData(data) { 
    var _this = this; 

    // this dumps data to a file and get the name of the file via a callback 
    dump(data, function (outputFile) { 
     _this.latestLog = outputFile; 
    }); 
    } 
} 

// mit Pfeilfunktionen

class Logger { 
    dumpData(data) { 
    dump(data, outputFile => this.latestLog = outputFile); 
    } 
} 

Answer 3

Pfeil Funktion setState

componentDidMount() { 
    const reference = database.ref("highscores"); 

    // Pushing sorted data to highscoreArray. 
    reference.orderByChild("highscore").limitToLast(3).on("value", (snapshot) => { 
     sortedHighscores = []; 
     snapshot.forEach((child) => { 
      sortedHighscores.push({ 
       "username": child.val().username, 
       "score": child.val().highscore 
      }); 
     }); 
     sortedHighscores = sortedHighscores.reverse(); 
     console.log("sortedh", sortedHighscores); // fetch success 
     this.setState({highscoreArray: sortedHighscores}); // gives error 
    }); 
} 

Answer 4

1.this nicht zugänglich innerhalb der Schleife zu verwenden, so variable let that = this die Verwendung that verwenden, wo immer Sie diese benötigen in dieser Funktion.

componentDidMount() { 
     const reference = database.ref("highscores"); 
     let that = this // here your variable declaration 
     // Pushing sorted data to highscoreArray. 
     reference.orderByChild("highscore").limitToLast(3).on("value", function (snapshot) { 
      sortedHighscores = []; 
      snapshot.forEach(function (child) { 
       sortedHighscores.push({ 
        "username": child.val().username, 
        "score": child.val().highscore 
       }); 
      }); 
      sortedHighscores = sortedHighscores.reverse(); 
      console.log("sortedh", sortedHighscores); // fetch success 
      that.setState({highscoreArray: sortedHighscores}); // gives error 
     }); 
    } 

Hoffe das wird dir helfen :) Happy Coding!