如何在MobX存储中跟踪嵌套对象

时间:2017-12-22 10:34:36

标签: mobx mobx-react

让我留下我通过API调用加载myObject:

myObject = {
  fieldA: { details: 'OK', message: 'HELLO' },
  fieldB: { details: 'NOT_OK', message: 'ERROR' },
}

只有每个字段的详细信息和消息都可以更改。我希望这个对象在MobX存储中是可观察的(属性?将在下面定义)。我有一个简单的React组件,它从存储中读取两个字段:

@observer
class App extends Component {
  store = new Store();

  componentWillMount() {
    this.store.load();
  }

  render() {
    return (
      <div>
        {this.store.fieldA && <p>{this.store.fieldA.details}</p>}
        {this.store.fieldB && <p>{this.store.fieldB.details}</p>}
      </div>
    );
  }
}

我读了this page试图了解MobX的反应,但仍然没有明确的想法。具体来说,下面的4家商店中哪一家都有用,为什么?

1 /

class Store1 = {
  @observable myObject = {};

  @action setMyObject = object => {
    this.myObject = object;
  }

  load = () => someAsyncStuff().then(this.setMyObject);
}

2 /

class Store2 = {
  @observable myObject = {};

  @action setMyObject = object => {
    this.myObject.fieldA = object.fieldA;
    this.myObject.fieldB = object.fieldB;
  }

  load = () => someAsyncStuff().then(this.setMyObject);
}

3 /

class Store3 = {
  @observable myObject = { fieldA: {}, fieldB: {} };

  @action setMyObject = object => {
    this.myObject = object;
  }

  load = () => someAsyncStuff().then(this.setMyObject);
}

4 /

class Store4 = {
  @observable myObject = { fieldA: {}, fieldB: {} };

  @action setMyObject = object => {
    this.myObject.fieldA = object.fieldA;
    this.myObject.fieldB = object.fieldB;
  }

  load = () => someAsyncStuff().then(this.setMyObject);
}

1 个答案:

答案 0 :(得分:6)

除解决方案2外,以上所有方法均有效。 这是因为如Mobx文档中描述的那样:

  

通过observable传递对象时,只有属性   在使对象可观察时存在将是可观察的。   稍后添加到对象的属性将不会变为   可观察的,除非使用extendObservable

在第一个解决方案中,您再次使用返回对象中已存在的属性重新分配对象。 在3和4中,您使用这2个属性初始化了对象,因此它可以正常工作。

另外我认为在您的组件示例中,您打算像这样使用它(否则,它将无法以任何方式工作):

render() {
    const { myObject } = this.store;

    return (
      <div>
        {myObject && myObject.fieldA && <p>{myObject.fieldA.details}</p>}
        {myObject && myObject.fieldB && <p>{myObject.fieldB.details}</p>}
      </div>
    );
}