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

Question

让我留下来通过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>
    );
  }
}

我阅读本页试图了解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);
}

Answer 1

除解决方案2以外，上述所有方法均适用。这是因为如Mobx文档中有关对象的描述：

当通过可观察对象传递对象时，只有在使对象可观察时存在的属性才是可观察的。除非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>
    );
}