Question

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

在我的组件中，我使用componentDidUpdate检查userLoggedIn是否为true，如果是，则我将重定向到“Main”页面。

// 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方法中插入了重定向条件，它也会导致无限循环。我无法理解为什么它在导航到新页面时仍在尝试渲染。

Answer 1

看起来您的SignUp页面在导航到主页面后不断获取新道具和更新。我认为这是由于更新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
  }
}

Answer 2

您可以使用withNavigationFocus来确定组件是否聚焦。

componentDidUpdate继续在页面导航后执行

2 个答案: