React Mobx componentDidUpdate没有更新时，可观察到的变化

我是新来Mobx和reactjs在一般情况下，我有Redux的知识和反应原生，并在Redux时，当我用来调用一个动作和道具得到更新，componentDidUpdate生命周期方法被触发。React Mobx 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有更好的方法吗？谢谢

来源

2017-10-06 Ibraheem Al-Saady

观察者React Component将在上次渲染中取消引用的观察值发生更改时重新呈现。也许把这个逻辑与视图分开会更好？ – Tholle

@Tholle是绝对逻辑应该从视图分开，我只是试验mobx，我想知道这个案件具体。感谢您的建议:) –

观察者组件只会对其render方法中提到的观测值作出反应。 MobX文档covers this。

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

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

来源

2017-10-07 04:02:51 Alik

这是同样的问题，它不会触发，除非渲染函数具有'this.props.store'，并且如果渲染函数具有它，'componentDidUpdate'被触发。这里有什么可能是错误的？ –

@ IbraheemAl-Saady我编辑了我的答案 – Alik

噢，感谢您的解释，并且按照我的意愿工作。是否可以在生产中安全使用？ –

React Mobx componentDidUpdate没有更新时，可观察到的变化

回答

相关问题