react-native-router-flux操作。{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");
    }

authActions：

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（），但是那完全没有效果，而且皮棉绒也无法识别。

我正在使用“ react-native-router-flux”：“ ^ 4.0.0-beta.31”，但是如果可以的话，我真的很想解决这个问题而不更改版本号。这样做总是会带来数日之内的问题，一旦在游戏商店中出现，该项目将可能再也不会被触及。

Answer 1

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

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