Javascript Mobx更新对象中的单个属性

我已经在我的商店中创建了一个

可观察的

属性，如下所示

class Store {
  @observable values = { id: '', name: '' }
}

此可观察对象在表单中使用，提交表单后如何重置这些值？

您可以在类中使用并实现

reset

方法：

const initValues = { id: '', name: '' };

class Store {
  @observable values = {};
  constructor() {
    extendObservable(this.values, initValues);
  }

  reset() {
    extendObservable(this.values, initValues);
  }
}

如果不将属性扩展到

this.values

observable，则的解决方案是好的。如果这样做，

reset（）

方法将不会清除新扩展的属性

以下是我的解决方案：

class Store {
    const initValues = {id: '', name: ''};
    @observable values = {};
    @action resetValues() {
        Object.keys(this.values).forEach(key => delete this.values[key]);
        extendObservable(this.values, initValues);
    }
    constructor() {
        This.resetValues();
    }
}

或者更好地使用可观察地图：

class Store {
    const initValues = {id: '', name: ''};
    @observable values = new Map();
    @action resetValues() {
        this.values.replace(initValues);
    }
    constructor() {
        this.resetValues()
    }
}

---

您可以创建一个字段

initialValues

，用于在提交时覆盖当前的

值。