componentDidUpdate在页面导航后继续执行

我正在使用React-Native，React-Navigation和Redux。我有一个注册页面，它会将用户信息发送到服务器，并会听取令牌。一旦收到令牌，我将改变全局状态{userLoggedIn：true}。componentDidUpdate在页面导航后继续执行

在我的部分，我使用的是componentDidUpdate检查userLoggedIn是否属实，如果是的话，我会重定向到“主”页面。

// component/register 
class Register extends Component { 
    ... 
    componentDidUpdate(){ 
    console.log('componentDidUpdate from the register page') 
    if (this.props.people.userLoggedIn==true){ 
     this.props.navigation.navigate('Main'); 
    } 
    } 

    render(){ 
    //sign up form 
    } 
} 

... 
export default connect(mapStateToProps, mapDispatchToProps)(Register);

这工作正常，因为我重定向到主页面。但是，在主页面上，它不断刷新。我检查了日志，发现componentDidUpdate仍然是从注册页面调用的。

因此我有点困惑为什么componentDidUpdate仍然被调用？在导航到新页面后不会停止检查吗？

编辑1：我意识到它不是componentDidUpdate的问题。我在render方法中插入了重定向条件，它也会导致无限循环。我无法理解为什么它在导航到新页面时仍然尝试渲染。

来源

2017-08-09 Sydney

即使您导航到另一个页面，上一页仍然在堆栈上，只是隐藏不删除。所以它会在道具或状态改变时更新。 – Val

它看起来像你的注册页面状态越来越新道具和更新您导航到主画面。我认为这是由于更新的navigation道具。在你componentDidUpdate你应该确保你打算只在一种情况下更改页面 - 当你的userLoggedIn从false改为true。

// component/register 
class Register extends Component { 
    ... 
    componentDidUpdate(prevProps){ 
    console.log('componentDidUpdate from the register page') 
    if (this.props.people.userLoggedIn === true && prevProps.people.userLoggedIn === false) { 
     this.props.navigation.navigate('Main'); 
    } 
    } 

    render(){ 
    //sign up form 
    } 
}

来源

2017-08-09 09:19:03

componentDidUpdate在页面导航后继续执行

回答

相关问题