Javascript 如何在react native中停止直到进度条完成

我已经创建了一个带有进度条的启动屏幕（用于进度条）。我的目标是在此初始屏幕中检查用户可用性，并相应地重定向用户。我正在使用redux，所以创建了一个操作来检查是否有可用的登录令牌

登录检查的我的Redux操作：

export const loginCheck = (callback) => {

return async (dispatch) => {
    let token = await AsyncStorage.getItem(LOGIN_TOKEN);
    let userUid = await AsyncStorage.getItem(USER_UID);
    if(token && userUid) {
        dispatch({ type: VALID_LOGIN_AVAILABLE, payload: token });
        dispatch({ type: VALID_UID_AVAILABLE, payload: userUid });
        callback();
    }
    else {
        dispatch({ type: NO_VALID_LOGIN_AVAILABLE, payload: token });
    }
 }
};

所以，当用户登录时，我将令牌和uid从firebase存储到异步。并在用户详细信息可用时使用回调。因此，在启动屏幕中，当我收到回调时，我将状态“isUserAvailable”设置为true，否则默认为false

我的目标是，等待进度条完成，如果isUserAvailable为true，则重定向到Dashboard&&progress bar==1。否则用户将被重定向到注册屏幕

我的进度条操作代码：

export const progressBarLevel = () => {
return (dispatch) => {
    this.progress = 0;
    dispatch({ type: PROGRESS, payload: 0 });
    setTimeout(() => {
        this.indeterminate = false;
       const interval = setInterval(() => {
            this.progress += Math.random()/5;
            if(this.progress > 1){
                this.progress = 1;
                clearInterval(interval);
            }
            return dispatch({ type: PROGRESS, payload: this.progress });
        },250)
    },500)
  }
} 

并使用道具获取进度数据。因此，当它达到1时，条完成。当bar结束时，将执行登录检查并重定向。这就是整个过程

我的组件安装代码：

componentDidMount() {
    this.props.loginCheck(() => {
        this.setState({ isUserAvailble: true})
    })

   this.props.progressBarLevel();
}

我的组件更新代码：

 componentDidUpdate() {
   if(this.props.progressed === 1 && this.state.isUserAvailble === true) {
        this.props.navigation.navigate('Dashboard')
   }
   else {
        this.props.navigation.navigate('SignUpForm')
   }

}

现在发生的是，即使没有完成进度条，页面也会被重定向到SignUpForm，如何让componentDidUpdate等待进度条完成

---

请帮助

以下代码将解决您的问题。这里的假设是当进度条完成时，您有isUserAvailable

componentDidUpdate() {
   if(this.props.progressed === 1) {
       if(this.state.isUserAvailble === true) {
        this.props.navigation.navigate('Dashboard')
       }
       else {
          this.props.navigation.navigate('SignUpForm')
       }
   }
}

还有一个观察，您不应该通过回调设置状态。您可以使用userId状态来检查它

---

还有一点，您应该从登录操作中分派进度，并在完成对可用用户的检查后将其清除。这是一种更干净的方法。

是的，它奏效了，感谢您的解决方案！顺便问一下，我能知道为什么我们不应该使用回调设置状态吗？所以你建议我将进度和登录操作结合起来？这会有什么不同呢？有一段时间我遇到了一个错误，说明我试图从状态

RESPONDER\u INACTIVE\u PRESS\u IN转换为RESPONDER\u ACTIVE\u LONG\u PRESS\u IN，这是不受支持的。这很可能是因为Touchable.longPressDelayTimeout没有被取消。

知道这是什么吗？在10次尝试中，我至少得到了2次！现在我面临另一个问题，当我开始在singup表单中键入内容时，redux store get会更新值，因此singup表单会重定向到Dashboard。我认为，该组件仍在安装中。如何卸载组件？一旦页面被重定向，就不应该与此页面有任何关系！事实上，当我尝试你的建议时，把电话改回州政府。它的行为很奇怪，当我在注册页面上键入内容时，singup页面再次重定向到welcome页面，我再次单击singup按钮，然后再次键入，然后返回注册页面！发生了什么事？不要使用商店中的UserId，但可以在商店中为isUserAvailable设置bool。