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

Question

我创建了一个带有进度条的启动屏幕(使用 react-native-progress 作为进度条)。我的目标是检查此启动屏幕中的用户可用性并相应地重定向用户。我正在使用 redux，因此创建了一个操作来检查是否有可用的登录 token 。

我的登录检查 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 });
    }
 }
};

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

我的目标是，等待进度条完成，然后如果 isUserAvailable 为 true && 进度条 === 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)
  }
} 

并使用 props 来获取此进度数据。所以当它达到 1 时，酒吧就结束了。当 bar 结束时，将执行登录检查并重定向。这就是整个过程。

我的 ComponentDidMount 代码:

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

   this.props.progressBarLevel();
}

我的componentDidUpdate代码:

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

}

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

请帮忙

Answer 1

下面的代码可以解决您的问题。这里假设当进度条结束时你有 isUserAvailable 。

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

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

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