Mobx：オブザーバブルオブジェクトに新しい（配列）プロパティを追加する

Question

私は観測可能なオブジェクトを持っています。 キーは顧客エンティティの一意のIDであり、値は顧客の注文の配列（オブジェクト自体）です。

私はオブジェクトを初期化：

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

を残念ながら、それは私の物と思われる（またはその：使用すると、私はネットワークからデータを取得するとき、私はそれらを保存したい、そして、

@observable data = {}; 

プロパティ）が監視されていません。

これはなぜですか？そして私はこれをどのように修正できますか？観察可能なオブジェクトが配列としてその値としてどのように機能するかについて、私が知る必要のある特別なものがありますか？

Answer 1

この問題は、ドキュメントのCommon pitfalls & best practicesセクションで育っている：

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

だからではなく、観察対象物にextendObservableを使用しての、あなただけのnew key to a mapを追加することができます。あなたが `this.data = ...`必要はありませんので、

@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') 
);