Question

我是Mobx的新手，一般都是反应，我对Redux有所了解并做出本机反应，而当我以前调用动作并且道具得到更新时，在Redux中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中使用它1}}方法，componentDidUpdate未被触发。例如，如果我这样做

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

以上将触发componentDidUpdate。

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

Answer 1

Observer组件只会对其parking_meters = pd.read_csv('parking_meter_data.csv', dtype={'zone': 'category', 'sub_area': 'category', 'area': 'category', 'config_name': 'category' })方法中引用的可观察对象做出反应。 MobX文档covers this。

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

render

当可观察的更改时，React Mobx componentDidUpdate不会更新

1 个答案: