Mobx

Question

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

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

我的地址是对象数组，其中我有一些标准属性，我可以添加新的属性，使用 extendObservable 地址类型{state:'',town:'' }

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];
            }
    }
}

通过调用添加或删除，我必须更新其他属性之一，这样我才能看到我添加的新属性。当我放新的属性?

时如何观察它

Answer 1

如文档中所述，您 can only observe objects properties which exist during observer init。

如果你想观察一个动态键控对象（作为你的地址对象），你必须使用 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

Mobx - 如何使用动态表单输入跟踪深度变化？

Mobx - how track deep changes with dynamic form inputs?

typescript

mobx-react