Mobx - ダイナミックなフォーム入力で深い変化をどのように追跡するのですか？

Question

私はフォーム上でそれが必要です。 は私のフォームはデータで、このようなものです提出：

const initial = { 
    name "", 
    surname: "", 
    adresses: new Array() <- this give me warning when array empty * 
} 

私の住所が、私はいくつかの標準的な性質を持っているオブジェクトの配列であり、私は{状態のextendObservable 住所が型を使用して、新しいプロパティを追加することができます。「」町：「」}

extendObservable(this.props.data['adresses'][i], { [keyName]: '' }); 

私の問題は、住所がに新しいプロパティを追加するextendObservableをやって、私は（観察）ライブの変化を見ることはありませんが、extendObservableを行った後、私は状態の値を更新し、場合ということです私は新しい追加プロパティを見ることができます。なぜ私は住所にそれを追加すると、新しいプロパティが表示されません？私は他のプロパティのいずれかを更新する必要があるので、私は私が追加された新しいプロパティを参照することができます追加または削除を呼び出すことによって

const initial = { 
    namel: "", 
    surname: "", 
    addresses: new Array() 
} 

export class formStore { 
    constructor() { 
     this.formData = initial 
    } 
    @observable formData: { 
     [index: string]: any, 
     name: string, 
     surname: string, 
     addresses: any[] 
    }; 
    @action updatePropertyForm(key: string, value: any) { 
     this.formData[key] = value; 
    } 

    @action updatePropertyAddresses(key: string, value: string, i: number) { 
     this.formData.addresses[i][key] = value; 
    } 

    @action initializeFormData(data: any) { 
     this.formData = data; 
    } 

    @action addEmptyAddress() { 
     const emptyAddress = { 
      state: "", 
      townl: "", 
     } 
     this.formData['addresses'].push(emptyAddress); 
    } 

    @action addPropertyToAddresses(_keyName: string) { 
     const length = this.formData['addresses'].length; 
     for (var i = 0; i < length; i++) { 
      let keyName = _keyName 
      keyName = keyName.replace(/\s/g, '') 
      keyName = toLowerChar(keyName); 
      extendObservable(this.formData['addresses'][i], { [keyName]: '' }); 
     } 
    }  

    @action removePropetyFromAddresses(_keyName: string) { 
     const length = this.formData['addresses'].length; 
      for (var i = 0; i < length; i++) { 
       let keyName = _keyName 
       delete this.formData['addresses'][i][keyName]; 
      } 
    } 
} 

：

私の店は、この（typescriptです）です。 私は新しいプロパティを置くときそれを観察する方法？

Answer 1

文書に記載されているとおり、can only observe objects properties which exist during observer initです。

あなたは（あなたのアドレスオブジェクトなど）を動的キー付きオブジェクトを観察したい場合、あなたは（私は私のexempleで行ったように、または直接mobx.map）asMap修飾子を使用する必要が

このように：

// add a first addresse 
store.addresses.push(mobx.observable.map({town: "Stormwind", street: "Dwarf lane"})); 

// add a props to the first addresse 
store.addresses[0].set("number", 2); 

ここに実例があります。

https://jsbin.com/lasudor/2/edit?js,console