Question

假设我有一个包含两个MobX @observable字段的对象：

class Address {
  @observable country
  @observable city
}

当其中一个发生变化时，我想调用一个改变另一个的函数。例如，当country发生更改时，如果其值对新国家/地区无效，我可能希望清除city。

这有一个好的模式吗？

我认为我不能使用autorun。由于我正在尝试更改可观察值，并且我已启用enforceActions，因此我需要在action中更改它。但是这会引发错误“自动运行不接受操作，因为操作无法检测”：

autorun(action(() => {
    if (this.country === 'US' && this.city === 'Paris') this.city = '';
}));

我知道我可以添加@computed函数，该函数返回city或新值。但是city的原始值仍然存在，并且会在country更改时返回。我不想要这个;我想永久更改city。

@computed get realCity() {
    if (this.country === 'US' && this.city === 'Paris') return '';
    return this.city;
}

Answer 1

您可以使用observe观察构造函数中的对象，并在国家/地区更改时重置城市。

示例（JSBin）

class Address {
  @observable country = 'Sweden';
  @observable city = 'Stockholm';

  constructor() {
    observe(this, (change) => {
      if (change.name === 'country') {
        // Put your logic for changing the city here
        this.city = '';
      }
    });
  }
}

const address = new Address();

console.log(`${address.country}, ${address.city}`);
address.country = 'Spain';
console.log(`${address.country}, ${address.city}`);

Answer 2

此任务可以通过＆＃34;当＆＃34;在商店构造函数中初始化的进程：

class store(){
    constructor(){
     when (){
      ()=>{(this.country === 'US' && this.city === 'Paris')}
      ()=>{ this.city = ''}
    } 
  }
}

可在此处找到完整且文档齐全的说明： https://mobx.js.org/refguide/when.html

Answer 3

我认为你应该以不同的角度看待你的问题。

我问自己的问题是：你有什么办法可以避免你完全面对的问题吗？

为什么首先允许这种情况发生？

如果设置了国家/地区：为该国家/地区创建城市的子集。
如果设置了城市且国家/地区发生变化，请同时取消城市设置。

关于mobx特定模式，这些文档很有用：

根据经验：如果您有一个应该自动运行但不会产生新值的函数，请使用自动运行。使用计算用于其他一切。 Autoruns是关于启动效果，而不是产生新价值。 Mobx docs

Answer 4

observe(state, "country", ({ oldValue, newValue }) => this.handleCountryChange(oldValue, newValue));


handleCountryChange = (oldValue, newValue) => {}

MobX：如何更改可观察值以响应另一个值的变化？

4 个答案: