MobX - observable ne pas mettre à jour les accessoires passés?

Question

Lors de l'utilisation de MobX avec React, j'ai 2 composants. Depuis le parent j'envoie un accessoire à la composante de l'enfant comme celui-ci:

import { computed } from 'mobx' 
import { observer } from 'mobx-react' 

@observer 
class Parent extends React.Component { 
    @computed get user() { 
    const { gamer } = this.props; 
    } 

    render() { 
    return <div><Child user={this.user} /></div> 
    } 
} 

composante enfant:

import { observable } from 'mobx' 
import { observer } from 'mobx-react' 

@observer 
class Child extends React.Component { 
    @observable owner = this.props.user; 

    render() { 
    return <div>{this.owner.name}</div> 
    } 
} 

La première fois que je lance ce avec userX passé, l'enfant indique le nom du propriétaire userX correct, accessible via le @observable owner. Le problème est la deuxième fois que je cours cela avec un autre utilisateur passé userY, l'enfant montre encore userX même si le prop passé à lui est correctement userY quand je l'enregistre. Donc le prop transmis est différent par utilisateur (comme il se doit), mais l'observable reste "verrouillé" sur le premier utilisateur qui a été passé. Toute idée de pourquoi l'observable ne met pas à jour sa valeur à la this.props.user passée?

Mise à jour:

J'ai donc essayé @computed comme ceci:

@computed get owner() { 
    return this.props.user; 
} 

mais toujours la même question. La seule façon que je peux sembler pour accéder à l'utilisateur correct, seulement dans le rendu déclaration et directement du passé accessoire plutôt que d'avoir MOBX affecter la valeur de prop et le lire à partir MOBX observable/calculée:

render() { 
    console.log(this.owner.name); // shows old data (even w/ observable or computed returning the passed prop) 
    console.log(this.props.user.name); // shows new data correctly without mobx 

Je viens Je ne comprends pas pourquoi les @observable ou @computed ne renvoient pas les nouvelles données correctes. Y a-t-il de toute façon que mobx retourne correctement le dernier prop utilisé pour que le premier log de console fonctionne?

Answer 1

Je pense que nous faisons @observable owner = this.props.user, vous ne créez pas une référence à l'original observable, mais plutôt vous créez une nouvelle observable dont la valeur initiale sera la même que celle d'origine.

La solution (comme il vous semble déjà trouvé) est d'utiliser la valeur de l'hélice directement dans le composant de l'enfant:

@observer 
class Child extends React.Component { 
    render() { 
     return <div>{this.props.user.name}</div> 
    } 
} 

---

Si vous ne voulez pas cela, peut-être vous pouvez prendre regarder le clonage * l'observable en utilisant createViewModel du paquet MOBX utils-:

import { computed } from 'mobx' 
import { observer } from 'mobx-react' 
import { createViewModel } from 'mobx-utils' 

@observer 
class Child extends React.Component { 
    owner = createViewModel(this.props.user); 

    render() { 
     return <div>{this.owner.name}</div> 
    } 
} 

* Remarque: bien, il est pas le clonage exactement, mais les changements à l'utilisateur va se reflète dans l'objet propriétaire ainsi. Vérifiez the docs pour plus d'informations.