如何跟踪 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>
    );
  }
}

我阅读 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);
}

Answer 1

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

When passing objects through observable, only the properties that exist at the time of making the object observable will be observable. Properties that are added to the object at a later time won't become observable, unless extendObservable is used.

在第一个解决方案中，您使用已存在于返回对象中的属性再次重新分配对象。在 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>
    );
}

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

How to track nested object in a MobX store

javascript

mobx

mobx-react