javascript - 如何修复类型错误: undefined is not an object (evaluating 'state.routes' )

Question

我正在关注 React 导航文档，react-navigation-redux-helpers 的文档，但总是抛出这个错误。另外，如果我删除 persistGate，错误就会得到修复，但我需要保留一些数据，所以这不应该是一个选项

这是我的 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);

这是我的 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);

这是我的 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;

这是我的 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>
        );
    }
 }

Answer 1

我知道为时已晚，但它应该对其他人有所帮助:))

在你的 mystore.js 中

const middleware = createReactNavigationReduxMiddleware(
    (state) => state.navigation,
)

应该是这样的:

const middleware = createReactNavigationReduxMiddleware(
    (state) => state.router,
)