MobX: как изменить наблюдаемое значение в ответ на изменение другого значения?

Question

Скажем, у меня есть объект с двумя полями MobX @observable:

class Address {
  @observable country
  @observable city
}

Когда одно из них изменяется, я хочу вызвать функцию, которая меняет другое.Например, когда country изменяется, я могу захотеть очистить city, если его значение недопустимо для новой страны.

Есть ли подходящий шаблон для этого?

Iне думаю, что я могу использовать 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(state, "country", ({ oldValue, newValue }) => this.handleCountryChange(oldValue, newValue));


handleCountryChange = (oldValue, newValue) => {}

Answer 2

Думаю, вам следует взглянуть на свою проблему под другим углом.

Я задаю себе вопрос: разве вы не могли бы что-то сделать, чтобы избежать проблемы, с которой вы сталкиваетесь в целом?

Зачем в первую очередь допускать ситуацию?

• Если задана страна: создайте подмножество городов для этой страны.
• Если город установлен, а страна меняется, одновременно снимите город.

Что касается специфических шаблонов mobx, этот бит документов полезен:

Как правило: используйте автозапуск, если у вас есть функция, которая должна запускаться автоматически, но это нет привести к новому значению.Использование вычисляется для всего остального.Автозапуск - это инициирование эффектов, а не создание новых ценностей. Документы Mobx

Answer 3

Вы можете использовать Наблюдать , чтобы наблюдать объект в конструкторе, и сбросить город, если страна изменилась.

Пример ( 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 4

Эту задачу можно выполнить с помощью процесса «когда», инициализированного в конструкторе хранилища:

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

Полное и хорошо документированное объяснение можно найти здесь: https://mobx.js.org/refguide/when.html