reactjs - 当可观察到的更改时，React Mobx componentDidUpdate不更新

我是Mobx和reactjs的新手，我熟悉Redux和 native 响应，在Redux中，当我习惯于调用一个 Action 并且 Prop 得到更新时，会触发componentDidUpdate生命周期方法。

我现在遇到的情况是登录。因此，用户填写表单，单击“提交”，然后提交调用Mobx操作(异步)，并且服务器响应时，observable被更新，然后导航到主页(导航在组件中进行)。

这是我的商店代码。

import { autorun, observable, action, runInAction, computed, useStrict } from 'mobx';

useStrict(true);

class LoginStore {
    @observable authenticated = false;
    @observable token = '';

    @computed get isAuthenticated() { return this.authenticated; }


    @action login = async (credentials) => {
        const res = await window.swaggerClient.Auth.login(credentials)l
        // checking response for erros
        runInAction(() => {
            this.token = res.obj.token;
            this.authenticated = true;
        });
    }
}

const store = new LoginStore();

export default store;

export { LoginStore };

这个处理程序在我的组件中

handleSubmit = (e) => {
        e.preventDefault();

        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.store.login(values);
            }
        });
    }

    componentDidUpdate() {
        if (this.props.store.isAuthenticated) {
            const cookies = new Cookies();
            cookies.set('_cookie_name', this.props.store.token);
            this.props.history.push('main');
        }
    }

这不是理想的代码，我只是在做实验，但是我不太明白。

另外，如果我在(isAuthenticated)生命周期方法中使用计算值render，则会触发componentDidUpdate，但是如果我在render方法中未使用它，则不会触发componentDidUpdate。
例如，如果我这样做

render() {
  if (this.props.store.isAuthenticated) return null
  // .... rest of the code here
}

以上将触发componentDidUpdate。

我想念什么吗？有没有更好的方法来使用Mobx？
谢谢

最佳答案

观察者组件将仅对其render方法中引用的可观察对象使用react。 MobX文档covers this。

我建议您使用 when 解决此问题。

componentDidMount() {
  when(
    () => this.props.store.isAuthenticated,
    () => {
      // put your navigation logic here
    }
  );
}