Как выполнить функцию после загрузки компонента в Reactjs + MobX?

Question

Я новичок в работе с React + MobX, поэтому я не до конца понимаю, как они работают.

Я хочу, чтобы функция getUserDataFromAPI() (в ProfileStore) выполнялась только тогда, когда яперейдите на http://localhost:3000/profile и загрузится компонент ProfileComponent.

Вот что у меня сейчас:

Несколько хранилищ инициализируются внутри rootStore.

RootStore.js

class RootStore {
    constructor() {
        this.profileStore = new ProfileStore(this)

        [other randomStores]
    }
}

А потом в ProfileStore.js у меня есть:

ProfileStore.js

constructor(rootStore) {
    this.rootStore = rootStore

    runInAction('Load Profile', async () => {
        await this.getUserDataFromAPI()
    });
}

Я до сих пор не понимаю, что делает runInAction, но главноепроблема в том, что ProfileStore's constructor выполняется независимо от загружаемого компонента, потому что он инициализируется с помощью rootStore.

. Как заставить эту функцию выполняться только при переходе к /profile и * 1027? * загружен?

Answer 1

То, что вы хотите, это метод componentDidMount.

componentDidMount(){
  this.profileStore = new ProfileStore(this)
}

, который будет выполнен один раз для компонента MOUNT, а не при создании компонента.

https://reactjs.org/docs/react-component.html#componentdidmount