当可观察到的变化时，React Mobx componentDidUpdate 不会更新

Question

总的来说，我是 Mobx 和 reactjs 的新手，我了解 Redux 和 react native，在 Redux 中，当我过去常常调用一个动作并且 props 得到更新时，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');
        }
    }

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

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

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

以上会触发componentDidUpdate。

我错过了什么吗？使用 Mobx 有更好的方法吗？谢谢

Answer 1

Observer 组件只会对其 render 方法中引用的可观察对象做出反应。 MobX 文档 covers this.

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

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

当可观察到的变化时，React Mobx componentDidUpdate 不会更新

React Mobx componentDidUpdate is not updating when observable changes

reactjs

mobx

mobx-react