Reagieren: Kann nur ein bereitgestelltes aktualisieren oder Montagekomponente

Question

Dies ist meine Komponente:

var booksRef = new Firebase("https://bookshelf.firebaseio.com/books"); 

class BookShelf extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = {books: [] }; 
     var self = this; 
     booksRef.on("value", function(snapshot){ 
     const newbooks = []; 
     var firebaseBooks = snapshot.val(); 
     for(var bookId in firebaseBooks){ 
      newbooks.push({key: bookId, book: firebaseBooks[bookId]}); 
     } 
     var newState = self.state; 
     newState.books = newbooks; 
     self.setState(newState); 
     }); 
    } 
    ... 

Wenn ich auf diese Komponente zum ersten Mal navigieren, gibt es kein Problem. Aber wenn ich zu einer anderen Komponente navigieren und dann wieder zurück auf diese Komponente, erhalte ich die folgende Warnung in der Konsole:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the component. 

Ich glaube, ich brauche etwas zu tun, bevor ich die Komponente verfügen, aber ich bin nicht sicher, Warum.

Answer 1

Zu Ihrer Frage ist der gesamte Code, den Sie im obigen Klassenkonstruktor haben, vor der Montage im Wesentlichen: componentWillMount, so dass die Logik NUR an diesem Punkt ausgeführt wird.

Jetzt ist alles in Ordnung, aber das Problem ist kompliziert kaufen die asynchrone Anforderung, die Sie mit Firebase haben. Früher gab es eine Methode mit dem Namen isMounted, die Sie einfach überprüfen konnten, aber jetzt, wo dies veraltet ist, finden Sie hier die besten Vorgehensweisen für Ihr Szenario: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

Überprüfen Sie diesen Blogpost über andere (aber Hackey) Wege zu lösen Sie das Problem: http://jaketrent.com/post/set-state-in-callbacks-in-react/

scrollen Sie zum es6 Teil, das erste Bit ist nicht direkt relevant.

Zusätzliche:

Schauen Sie sich diese babel Blog-Post: Insbesondere der Abschnitt über die Klassen: Nicht sicher, ob Sie es brauchen, aber es ist gut

https://babeljs.io/blog/2015/06/07/react-on-es6-plus