Reactjs 删除看似未使用的MapStateTrops时routes.js无法正常工作

我现在正在清理我的代码，发现了一些奇怪的东西，我发现了一个

mapstatetops

和

connect

文件中没有使用过：

import React from 'react';
import { Scene, Router, ActionConst, Stack } from 'react-native-router-flux';
import { connect } from 'react-redux';                  //HERE
import { AsyncStorage } from 'react-native';

//import components for scenes
import Splash from '../components/Splash/Splash';
import Login from '../modules/auth/scenes/Login';
import Home from '../modules/home/scenes/Home';
import itemDescription from '../modules/home/scenes/itemDescription';
import About from '../modules/home/scenes/About';
import Setting from '../modules/home/scenes/Setting';
import NavDrawer from '../modules/home/components/NavDrawer';

//Import Store, actions
import store from '../redux/store'
import * as t from '../modules/auth/actionTypes';

export const mapStateToProps = state => ({                      //HERE
    isLoggedIn: state.authReducer.isLoggedIn 
});

class Routes extends React.Component {
    constructor() {
        super();
        this.state = {
            isReady: false,
            isLoggedIn: false,
            userName:""
        }
    }

    componentDidMount() {
        //load token from async and put it in redux's state
        AsyncStorage.getItem('token').then((data) => {
            setTimeout(() => {
                if (data !== null) {
                    this.setState({ isReady: true, isLoggedIn: true });
                    store.dispatch({ type: t.LOGGED_IN, token: data });
                }
                else {
                    this.setState({ isReady: true, isLoggedIn: false })
                    store.dispatch({ type: t.LOGGED_OUT });
                }
            }, 5000)
        });

        //load username from async storage and put it in route's state to be passed to drawer as props
        AsyncStorage.getItem('username').then(name => {
            this.setState({ userName: name.charAt(0).toUpperCase() + name.slice(1) });
        }); 
    }

    render() {
        if (!this.state.isReady)
            return <Splash />
        return (
            <Router>
                <Scene key="root" hideNavBar>
                    <Stack key="Auth" initial={!this.state.isLoggedIn}>
                        <Scene key="Login" hideNavBar component={Login} title="Login" />
                    </Stack>
                    <Stack key="Main" initial={this.state.isLoggedIn}>
                        <Scene drawer key="NavDrawer" hideNavBar contentComponent={()=><NavDrawer username={this.state.userName}/>} type={ActionConst.REPLACE} panHandlers={null}>
                            <Scene key="homeTab" title="Home" drawerLockMode={'locked-closed'}>
                                <Scene key="Home" hideNavBar component={Home} title={"Home"} />
                                <Scene key="itemDescription" hideNavBar component={itemDescription} title="Item Description" back />
                            </Scene>
                            <Scene key="aboutTab" title="About" drawerLockMode={'locked-closed'}>
                                <Scene key="About" hideNavBar component={About} title={"About"} />
                            </Scene>
                            <Scene key="settingTab" title="Settings" drawerLockMode={'locked-closed'}>
                                <Scene key="Setting" hideNavBar component={Setting} title={"Setting"} />
                            </Scene>
                        </Scene>
                    </Stack>
                </Scene>
            </Router>
        )
    }
}

export default connect(mapStateToProps)(Routes)               //HERE

从“React”导入React；
从“react native Router flux”导入{场景、路由器、ActionConst、堆栈}；
从'react redux'导入{connect}//在这里
从“react native”导入{AsyncStorage}；
//为场景导入组件
从“../components/Splash/Splash”导入Splash；
从“../modules/auth/scenes/Login”导入登录名；
从“../modules/Home/scenes/Home”导入主页；
从“../modules/home/scenes/itemDescription”导入itemDescription；
从“../modules/home/scenes/About”导入关于；
从“../modules/home/scenes/Setting”导入设置；
从“../modules/home/components/NavDrawer”导入NavDrawer；
//导入存储、操作
从“../redux/store”导入存储
从“../modules/auth/actionTypes”导入*作为t；
export const mapStateToProps=state=>（{//此处
isLoggedIn:state.authReducer.isLoggedIn
});
类。组件{
构造函数（）{
超级（）；
此.state={
伊斯雷迪：错，
伊斯洛格丁：错，
用户名：“
}
}
componentDidMount（）{
//从async加载令牌并将其置于redux的状态
AsyncStorage.getItem（'token'）。然后（（数据）=>{
设置超时（（）=>{
如果（数据！==null）{
this.setState（{isReady:true，isLoggedIn:true}）；
dispatch（{type:t.LOGGED_IN，token:data}）；
}
否则{
this.setState（{isReady:true，isLoggedIn:false}）
dispatch（{type:t.LOGGED_OUT}）；
}
}, 5000)
});
//从异步存储加载用户名，并将其置于路由状态，作为道具传递给抽屉
AsyncStorage.getItem（'username'）。然后（name=>{
this.setState（{userName:name.charAt（0.toUpperCase（）+name.slice（1）}）；
}); 
}
render（）{
如果（！this.state.isReady）
返回
返回(
}类型={ActionConst.REPLACE}panHandlers={null}>
)
}
}
导出默认连接（MapStateTops）（路由）//此处

我很确定这些都是我早期开发的，我还没有删除，但是，当我尝试删除这3条标记行，并单独导出默认路由时，发生了一些奇怪的事情：

登录后键盘不会消失

依赖于存储在redux状态上的令牌的主屏幕数据突然没有获取（获取失败）

用户名不会加载到抽屉中

据我所知，

mapstatetops

仅用于将redux的状态映射到链接（使用

connect

）组件的prop，以便组件可以访问它们

它应该是只读机制，因为我正在使用我的

componentDidMount

中的

store.dispatch

设置redux的状态

你会怎么猜测为什么会发生这种情况？我是不是理解错了

老实说，我不知道该去哪里找：(

提前感谢您的任何想法

---

更新：由于某种原因，当我删除

MapStateTrops

时，我发现上面代码段中的

store.dispatch

没有及时更新令牌，使我家无法从其

componentDidMount（）中获取数据

因为令牌仍然为空。但是，在Home生命周期的下一次迭代中，控制台日志显示令牌已更新，但componentDidMount在更新后而不是之前没有被调用。问题仍然存在，为什么

MapStateTrops

在这种情况下很重要？

在整个应用程序中进行一些控制台日志记录之后，我终于知道了在这种情况下，MapStateTops的重要性是什么。 看起来情况是这样的：

使用MapStateTops：

routes加载令牌-->调度令牌以存储并开始加载home-->home

componentDidMount

已触发，但令牌仍然为空，因为调度未完成-->一旦调度完成，routes将重新装载，因为它订阅的MapStateTops将随着调度更新-->home重新加载，这次是tok在那里吗

没有：

routes加载令牌-->调度令牌以存储并开始加载home-->home

componentDidMount

已触发，但令牌仍然为空，因为调度未完成-->一旦调度完成，routes不会重新装载，因为其未订阅使用调度更新的MapStateTops-->home不会重新加载

看来我的应用程序正在运行，但原因完全错误！！

因此，在我删除了

mapStateToProps

以使我的应用程序在逻辑上合理运行之后，它可以归结为我问题中代码片段的以下两行：

this.setState({ isReady: true, isLoggedIn: true });
store.dispatch({ type: t.LOGGED_IN, token: data });

这两行是比赛中的，开始时序列是关闭的，我应该先

调度

，然后将状态设置为

isReady:true

，这比上面的代码片段更有意义，因为我甚至还没有将令牌发送到服务器，我怎么能说“嘿，你可以关闭启动屏幕并开始加载回家呢？”