6

いくつかのデータを保存したい観察可能なオブジェクトがあります。キーは顧客エンティティの一意の ID であり、値は顧客の注文の配列 (オブジェクト自体) です。

オブジェクトを次のように初期化します。

@observable data =  {};

次に、ネットワークからデータを取得したら、次を使用して保存します。

@action
saveData(customerId, ordersForCustomer) {
  this.data = extendObservable(this.data, {
    [customerId]: observable(ordersForCustomer);
  }
}

残念ながら、オブジェクト (またはそのプロパティ) が監視されていないようです。

どうしてこれなの？どうすればこれを修正できますか？オブザーバブル オブジェクトが配列を値として扱う方法について、特に知っておく必要があることはありますか?

4

1 に答える 1

8

この問題は、ドキュメントの一般的な落とし穴とベスト プラクティスのセクションで取り上げられています。

MobX の監視可能なオブジェクトは、以前に監視可能と宣言されていなかったプロパティの割り当てを検出したり、反応したりしません。そのため、MobX の監視可能なオブジェクトは、定義済みのキーを持つレコードとして機能します。を使用 extendObservable(target, props)して、新しい監視可能なプロパティをオブジェクトに導入できます。ただし、オブジェクト イテレータはこれを好むfor .. inか Object.keys()、自動的に反応しません。ユーザーを ID で保存するなど、動的にキーが設定されたオブジェクトが必要な場合は、 observable.map を使用して観察可能な _map_s を作成し ます。

したがって、監視可能なオブジェクトで使用する代わりに、新しいキーをマップにextendObservable追加するだけです:

@observer
class App extends Component {
  @observable data = asMap({});
  constructor() {
    super();
    setInterval(() => {
      this.data.set(Math.random().toString(36).slice(-5), Math.random());
    }, 1000);
  }
  render() {
    return (
      <div> 
        { this.data.entries().map(e => <div> {e[1]} </div>) }
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);
于 2016-09-29T19:14:22.390 に答える