react-native-router-flux操作。{key}无法识别,调用时会导致错误

该代码曾经在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”,但我真的很想在不更改版本号的情况下解决此问题。这样做总是会带来数日之内的问题,一旦出现在游戏商店中,该项目将很可能再也不会被触及。

conandx 回答:react-native-router-flux操作。{key}无法识别,调用时会导致错误

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

<Scene hideNavBar key="loginForm" type={ActionConst.REPLACE} component={LoginForm} initial />
本文链接:https://www.f2er.com/3100328.html

大家都在问