[英]How to fix TypeError: undefined is not an object (evaluating 'state.routes')
I'm following the react navigation documentation, react-navigation-redux-helpers's documentation, but always throw me this error.我正在关注反应导航文档,react-navigation-redux-helpers 的文档,但总是向我抛出这个错误。 also if i erase the persistGate the error gets fixed but i need to persist some data so that shouldn't be an option另外,如果我删除persistGate,错误会得到修复,但我需要保留一些数据,所以这不应该是一个选项
This is my store.js这是我的 store.js
import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';
import Reducer from './reducers/index';
const persistConfig = {
key: 'root',
storage: AsyncStorage,
blackList: [],
};
const AppReducer = persistReducer(persistConfig, Reducer);
const middleware = createReactNavigationReduxMiddleware(
(state) => state.navigation,
);
export const store = createStore(AppReducer, applyMiddleware(middleware));
export const persistor = persistStore(store);
This is my app-with-state.js这是我的 app-with-state.js
import AppNavigator from './AppNavigator';
const AppNavigatorWithState = createReduxContainer(AppNavigator);
class ReduxNavigation extends React.Component {
render() {
const { state, dispatch } = this.props;
return <AppNavigatorWithState navigation={state} dispatch={dispatch} />;
}
}
const mapStateToProps = (state) => ({
state: state.navigation,
});
export default connect(mapStateToProps)(ReduxNavigation);
this is my AppNavigator.js这是我的 AppNavigator.js
const Main = createStackNavigator(
{
Home: Home,
Movie: Movie,
Category: Category,
},
{
defaultNavigationOptions: {
header: Header,
},
},
);
const TabNavigator = createBottomTabNavigator(
{
Home: {
screen: Main,
navigationOptions: {
tabBarIcon: <Icon icon='🏠' />,
},
},
About: { screen: About },
Lucky: { screen: Lucky },
Profile: { screen: Profile },
},
{
tabBarOptions: {
activeTintColor: 'white',
activeBackgroundColor: '#65a721',
},
},
);
//const App = createAppContainer(TabNavigator);
export default TabNavigator;
and here is my App.js这是我的 App.js
import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import Loader from './src/sections/components/loader';
import ReduxNavigation from './src/app-navigator-with-state';
import { createAppContainer } from 'react-navigation';
const Navigation = createAppContainer(ReduxNavigation);
type Props = {};
export default class App extends React.Component<Props> {
render() {
return (
<Provider store={store}>
<PersistGate persistor={persistor} loading={<Loader />}>
<Navigation />
</PersistGate>
</Provider>
);
}
}
I know its too late but it should help others:))我知道为时已晚,但它应该可以帮助其他人:))
In your mystore.js在你的 mystore.js
const middleware = createReactNavigationReduxMiddleware(
(state) => state.navigation,
)
should be look like this:应该是这样的:
const middleware = createReactNavigationReduxMiddleware(
(state) => state.router,
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.