Ne peut pas récrire variable observable en magasin MOBX

Question

Voici mon magasin de MOBX:

import { observable } from 'mobx'; 
 
import fb from '../Firebase'; 
 
import User from '../User'; 
 

 
export default class Profile { 
 

 
    @observable profile = {}; 
 
    @observable uid = null; 
 

 
    /** 
 
    * @return {void} 
 
    */ 
 
    constructor(user) { 
 
    this.user = user; 
 
    fb.firebase.auth().onAuthStateChanged(() => { 
 
     this.uid = user.currentUser.uid; 
 
     fb.profiles.child(this.uid).on('value', (snapshot) => { 
 

 
     // Doesn't matter what I will do here with this.profile... 
 
     this.profile = snapshot.val(); 
 
     
 
     }); 
 
    }); 
 
    } 
 
}

Essayer d'utiliser le profil propriété observable de l'observateur. Mais pour une raison quelconque, je ne peux pas obtenir le statut mis à jour.

Si je mets à jour le profil avant le "fb.profiles.child" donc pas à partir du rappel, cela fonctionnera.

Quelqu'un a une idée de pourquoi cela se passe-t-il? Je pense peut-être parce que son déjà monté à l'observateur ou quelque chose comme ça ...

Answer 1

Pour obtenir objet correctement mis à jour, vous devez utiliser observable (https://mobx.js.org/refguide/observable.html) et Object.assign pour définir la profile.

Voici quelques exemples (non testé):

@observable profile = observable({}); 
. 
. 
. 
this.profile = Object.assign({}, this.profile, snapshot.val()); 

Si Object.assign ne déclenche pas la mise à jour, vous devez utiliser extendObservable() (https://mobx.js.org/refguide/extend-observable.html):

@observable profile = observable({}); 
. 
. 
. 
extendObservable(profile, snapshot.val()); 

Une autre alternative consiste à utiliser observable.map (https://mobx.js.org/refguide/map.html) pour les structures plus complexes:

@observable profile = observable.map({ profileData: {} }); 
. 
. 
. 
const currentProfile = this.profile.get('profileData'); 
this.profile.set('profileData', Object.assign({}, currentProfile, snapshot.val())); 

Answer 2

Alors résoudre mon problème avec la question n'est pas possible, la partie la plus importante est manquante.

Il y avait un componentWillMount dans le composant. Après l'avoir supprimé, j'ai résolu mon problème.