react-native-router-flux Actions.{key} 无法识别并在调用时导致错误

Question

此代码曾经在 RN 0.57.4 上运行，但我需要升级项目才能在 Play 商店中获得它，因此该应用程序已更改为 0.61.4。 这是我们使用的主要路由器：

<Router sceneStyle={styles.allSceneStyle} navigationBarStyle={styles.allSceneStyle} titleStyle={styles.allSceneStyle}>
<Scene key="root" navigationBarStyle={styles.allSceneStyle} >
    <Scene type="reset" key="login" transitionConfig={() => ({ screenInterpolator: StackViewStyleInterpolator.forHorizontal })}>
        <Scene hideNavBar key="loginForm" component={LoginForm} initial />                            
    </Scene>                        
    <Drawer
        type="reset"
        hideNavBar
        key="drawer"
        contentComponent={DrawerContent}
        drawerImage={MenuIcon}
        drawerWidth={Dimensions.get('window').width}
        drawerPosition={'right'}
    >

        <Scene key='tabbar' transitionConfig={() => ({ screenInterpolator: StackViewStyleInterpolator.forHorizontal })} >
            <Scene key="landing" type={ActionConst.REPLACE} component={Landing} title="" titleStyle={styles.centerText} initial />
            <Scene key='landing2' component={LandingComponent} title='Landing Dummy 2' titleStyle={styles.centerText} back={true} backTitle="Back" backButtonImage={newBackIcon} backButtonTextStyle={{ color: colors.white, paddingTop: 3 }} navigationBarTitleImage={{ uri: this.props.icons[constants.DUMMY_ICON] }} navigationBarTitleImageStyle={styles.navigationBarTitleImageStyle2} />
        </Scene>

    </Drawer>
    <Scene key="createAccount" component={CreateAccount} back={true} backTitle="Back" backButtonImage={newBackIcon} backButtonTextStyle={{ color: colors.white, paddingTop: 3 }} />
</Scene>

应用程序启动后，我们确实成功登陆登录页面，并且可以登录并访问登陆页面，但每当我尝试注销时，我都会陷入无限循环。 这是相关的代码：

    onLogout() {
        console.log("BEFORE initial call");
        this.props.dispatch(logoutUser());
        console.log("AFTER initial call");
    }

授权操作：

export const logoutUser = () => {

    return (dispatch) => {
        console.log("Within logoutUser return dispatch");
        dispatch({
            type: 'LOGOUT_USER'
        });
        console.log("Within logoutUser PAST dispatch");
        Actions.login();
        console.log("Within logoutUser PAST login");
    };

};

authReducer：

case 'LOGOUT_USER':
    return {
        ...state,
        user: {},
        loading: false,
        error: '',
        email: '',
        password: ''
    };

如果我像这样运行应用程序，我会在 logcat 中看到：

[13:10:04] I | ReactNativeJS ▶︎ BEFORE initial call
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser return dispatch
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser PAST dispatch
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser PAST login
[13:10:04] I | ReactNativeJS ▶︎ AFTER initial call
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser return dispatch
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser PAST dispatch
                             └ Within logoutUser PAST login

然后最后 3 个不断重复，直到应用程序崩溃。

如果我注释掉 Actions.login(); 它不做这个循环，所以我相信问题就在那里。 linter 无法识别登录密钥，但它会识别 Actions.landing、landing2 和 key='tabbar' 场景中的其他场景，我认为这是一个很大的提示，但我仍然无法弄清楚。

我也在那里尝试过 Actions.loginForm() ，但这根本没有效果，并且没有被 linter 识别。

我正在使用 "react-native-router-flux": "^4.0.0-beta.31" 但如果可以的话，我真的很想在不更改版本号的情况下解决这个问题。 这样做总是会带来几天的问题，一旦这在游戏商店中出现，该项目可能永远不会再被触及。

Answer 1

您是否尝试将 REPLACE 类型添加到登录表单？ 我的猜测是您调用注销的组件没有卸载并不断调用注销操作。

<Scene hideNavBar key="loginForm" type={ActionConst.REPLACE} component={LoginForm} initial />