Warum stimmt der Status in ReactjS vs Firebasedaten nicht überein?

Question

Ich lerne Firebase mit reactJS zu verwenden. Ich versuche, meinen firebaseList-Status zu aktualisieren, um der Firebase-Datenbank zu entsprechen.

... 
const dbRef = firebase.initializeApp(config).database().ref().child('text'); 

class App extends Component { 
    constructor(){ 
    super(); 
    this.state = { 
     text: "", 
     firebaseList: {} 
    } 
    } 

    componentDidMount(){ 
    dbRef.on('value', snap => { 
     console.log(snap.val()); 
     this.setState({ 
     firebaseList: snap.val() 
     }); 
     console.log('firebaseList: ', this.state.firebaseList); 
    }); 
    } 
... 

Wenn ich zu Chromkonsole gehen, nachdem eine neue Zeichenfolge drängen, "This is a test!", das angezeigt wird:

Object {-KeoiS8luCsuKhzc_Eut: "asdf", -Keol-2Si05dmkmuac8l: "This is a test!"} 
firebaseList: Object {-KeoiS8luCsuKhzc_Eut: "asdf"} 

Warum ist mein firebaseList Zustand hinter um ein Element? Warum hat snap.val() zwei Schlüssel-Wert-Paare und firebaseList hat nur ein Schlüssel-Wert-Paare?

Answer 1

this.setState ist nicht garantiert synchron, weil sie in Chargen verarbeitet werden können. Das heißt, obwohl Sie in Ihrem Code console.log nach Ihrem setState aufrufen, hat sich der Status möglicherweise noch nicht tatsächlich geändert.

Aus dem Reagieren docs:

setState() nicht sofort this.state mutieren, sondern schafft einen anstehenden Zustandsübergang. Der Zugriff auf this.state nach dem Aufruf dieser Methode kann möglicherweise den vorhandenen Wert zurückgeben. Es gibt keine Garantie für synchronen Betrieb von Anrufen zu setState und Anrufe können für Leistungssteigerungen gebündelt werden.

Wenn Sie möchten, wenn Ihr Zustand überprüfen aktualisiert wird, können Sie entweder einen Rückruf als zweites Argument zu setState oder setzen eine gewisse Logik in der shouldComponentUpdate(nextProps, nextState) Lifecycle-Methode verwendet.

Beispiel:

componentDidMount(){ 
    dbRef.on('value', snap => { 
     console.log(snap.val()); 
     this.setState({ 
     firebaseList: snap.val() 
     },() => console.log('firebaseList: ', this.state.firebaseList)) 
    }); 
    } 

oder

shouldComponentUpdate(nextProps, nextState) { 
    if (this.state.firebaseList !== nextState.firebaseList) { 
    console.log('firebaseList: ', nextState.firebaseList); 
    } 
} 

setState Dokumentation: (Man beachte die Funktionssignatur, setState(nextState, callback))

https://facebook.github.io/react/docs/react-component.html#setstate

shouldComponentUpdate Dokumentation:

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate