MobX - Observable nicht überholt Requisiten?

Question

Wenn ich MobX mit React verwende, habe ich 2 Komponenten.

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> 
    } 
} 

Kinder Komponente: Von der Mutter ich eine Stütze für das Kind Komponente wie folgt senden

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> 
    } 
} 

Das erste Mal, dass ich diese laufen userX mit übergeben, zeigt das Kind die richtige userX Besitzername, Zugriff über die @observable owner. Das Problem ist das zweite Mal, dass ich dies mit einem anderen Benutzer ausgeführt userY übergeben, zeigt das Kind immer noch userX, obwohl die Requisite korrekt ist userY, wenn ich es protokolliere.

Also die übergebene Prop ist unterschiedlich pro Benutzer (wie es sein sollte), aber die beobachtbare bleibt "gesperrt" auf den ersten Benutzer, der übergeben wurde. Irgendeine Idee, warum das Observable seinen Wert nicht auf den übergebenen this.props.user aktualisiert?

Update:

Also habe ich versucht @computed wie folgt aus:

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

aber immer noch das gleiche Problem. Der einzige Weg, kann ich scheinen den richtigen Benutzer zugreifen können, nur in der Aussage machen und direkt von den übergebenen Stütze im Gegensatz zu mit mobx die Stütze Wert zuweisen und es aus mobx beobachtbaren lesen/berechnet:

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 

ich nur verstehe nicht, warum die @observable oder @computed die richtigen neuen Daten nicht zurückgeben. Gibt es trotzdem, dass mobx die zuletzt übergebene Requisite korrekt zurückgibt, damit das erste Konsolenprotokoll funktioniert?

Answer 1

Ich denke, dass Sie @observable owner = this.props.user tun, erstellen Sie keine Referenz auf die ursprüngliche beobachtbare, sondern erstellen Sie eine neue beobachtbare, deren Ausgangswert der gleiche sein wird wie der ursprüngliche.

Die Lösung (wie es scheint bereits gefunden) ist die Stütze Wert zu verwenden, um direkt in den Kindern Komponente:

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

---

Wenn Sie wollen dies nicht tun, vielleicht können Sie nehmen ein Blick auf das Klonen * die beobachtbare mit createViewModel aus dem mobx-utils-Paket:

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> 
    } 
} 

* Hinweis: gut, ist es nicht genau das Klonen, aber die Änderungen an Benutzer als auch in dem Eigentümer Objekt reflektiert erhalten. Überprüfen Sie the docs für weitere Informationen.