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

Question

我在我的商店中创建了一个 observable 属性

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

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

Answer 1

您可以使用 extendObservable 并在 class 上实施 reset 方法：

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

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

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

Answer 2

如果您不将属性扩展到 this.values 可观察对象，

@Tholle 的解决方案很好。如果这样做，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()
    }
}

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

Mobx update a single property in an object

javascript

mobx

mobx-react

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

Mobx update a single property in an object

javascript

mobx

mobx-react

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