Question

MOBX对通过代理对象完成的数据更改没有反应。

我正在使用Proxy对象来装饰对象模型，然后将Proxy对象存储在要显示在React UI中的MOBX存储中。

DataModel.js

import { extendObservable } from 'mobx'

export default function DataModel() {
   extendObservable(this, {
      prop1: 'foo',
      prop2: 'bar',
   })
}

decorateDataModel.js

export default function decorateDataModel(model) {
   return new Proxy(model, {
      get: (target, property) => {
         // do some things ...
         return model[property];
      set: (target, property, value) => {
         // do some things ...
      }
   });
}

MyStore.js

import { observable } from 'mobx';
import DataModel from './path/to/DataModel';
import decorateDataModel from './path/to/decorateDataModel';

class Store {
   @observable data = decorateDataModel(new DataModel());
}
const MyStore = new Store();
export default myStore;

然后我有一个观察者React组件，它监视“数据”并将其呈现在表中。如果我不装饰它，它的行为将与您期望的一样。如果使用控制台更改某些字段，MOBX会做出反应并呈现新数据。但是，当我用Proxy装饰它时，它不会对更改做出反应。使用控制台检查数据，表明它确实发生了更改，但是MOBX对更改没有反应。

还有其他人有这个问题吗？如何使MOBX对装饰对象中的更改做出反应？

Answer 1

import { extendObservable } from 'mobx'

const DataModel = () =>{
   extendObservable(this, {
      prop1: 'foo',
      prop2: 'bar',
   })  //<--- Close your parenthesis?
};

MOBX观察代理对象

1 个答案: