1

我需要它在表格上。我的表单在数据提交中是这样的：

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

我的地址是对象数组，其中我有一些标准属性，我可以使用 {state:'',town:'' } 的 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];
            }
    }
}

通过调用 add 或 remove 我必须更新其他属性之一，这样我才能看到我添加的新属性。当我放置新财产时如何观察它？

4

1 回答 1

3

如文档中所述，您只能观察在观察者初始化期间存在的对象属性。

如果要观察动态键控对象（作为地址对象），则必须使用asMap修饰符（或直接使用 mobx.map，就像我在示例中所做的那样）

像这样 ：

// 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

于 2017-04-21T15:33:34.443 回答