Блог

Могу ли я использовать библиотеку Mobx для вызова метода класса при изменении данных?

Например, MyObject выполняется запись container['item'] = 10 , и в результате вызывается myaction метод.

 class MyElement extends Component<any> {

    // modifiable data
    container: any = [];

    // method called when data (container) is modified
    myaction() {
        console.log('container was modified');
        console.log(this.container);
    }

    render() {
        <MyObject container = {this.container} />
    }
}

decorate(MyElement, {
    container: observable
} as any)
  

Вы могли бы использовать reaction , например:

   container = [];

  componentDidMount() {
    // save disposer function to use later inside componentWillUnmount
    this.reactionDisposer = reaction(
      () => this.container.length,
      () => {
        console.log('container was modified')
      }
    );
  }

  // Don't forget to dispose it when unmount
  componentWillUnmount() {
    this.reactionDisposer();
  }
  

Ссылка на Codesandbox:https://codesandbox.io/s/httpsstackoverflowcomquestions63864175-kjorh?file=/src/App.js

Кроме того, технически вы можете сделать это с помощью массива container['item'] = 10 , но я советую вам не использовать строковые ключи с массивом. Если вы хотите использовать строковые ключи, вам нужно использовать object или a Map .

Другие методы, которые вы также можете использовать для достижения желаемого:

• Автозапуск —https://mobx.js.org/refguide/autorun.html

• Когда (в основном одноразовая реакция) —https://mobx.js.org/refguide/when.html

• Или вещи более низкого уровня, такие как observe и intercept — https://mobx.js.org/refguide/observe.html