React Native：nextState.routes.forEach 未定义不是对象

Question

我正在使用 React Native 构建一个移动应用程序，但我遇到的一个问题是导航。现在我正在尝试使用一个主屏幕来实现一个登录屏幕，我可以从中注销或调用其他屏幕。为此，由于我使用了 redux，我尝试调整我的 StackNavigator 并为其制作一个 reducer 和一个单独的组件。但是在我完成此操作后，我遇到了这个错误：

undefined is not an object (evaluating nextState.routes.forEach)

这个错误是在我的代码中的 App.js 的连接函数中触发的，该函数必须将一些状态变量映射到导航组件。这是我的代码：

NavReducer.js

import { NavigationActions, StackNavigator } from "react-navigation";
import routes from "../core/routes";


export const AppNavigator = StackNavigator(routes)
const routerForLogin = AppNavigator.router.getActionForPathAndParams('Login')
const routerForPlane = AppNavigator.router.getActionForPathAndParams('PlaneList')
const loginState = AppNavigator.router.getStateForAction(routerForLogin);
const registerState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Register'));
const planeListState = AppNavigator.router.getStateForAction(routerForPlane);
const insertState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Insert'));

export const navReducer = (state = { loginState, planeListState, insertState, registerState }, action) => {
  switch (action.type) {
    case '@@redux/INIT':
      return {
        ...state,
        planeListState: AppNavigator.router.getStateForAction(routerForPlane, loginState)
      };

    case 'LOGIN':
      return {
        ...state,
        planeListState: AppNavigator.router.getStateForAction(routerForPlane, loginState)
      };

    case 'LOGOUT':
      return {
        ...state,
        loginState: AppNavigator.router.getStateForAction(
          NavigationActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'Login' })]
          })
        )
      };

    case 'REGISTER':
      return {
        ...state,
        registerState: AppNavigator.router.getStateForAction(action, state.registerState)
      };

    case 'INSERT':
      return {
        ...state,
        insertState: AppNavigator.router.getStateForAction(action, state.insertState)
      };

    default:
      return {
        ...state,
        planeListState: AppNavigator.router.getStateForAction(action, state.planeListState)
      };
  }
};

App.js

import React, { Component } from 'react';
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunk from 'redux-thunk';
import { Provider, connect } from 'react-redux';
import { addNavigationHelpers } from 'react-navigation';
import authReducer from './src/reducers/LoginReducer';
import registerReducer from './src/reducers/RegisterReducer';
import planeReducer from './src/reducers/PlaneListReducer';
import insertReducer from './src/reducers/InsertReducer';
import Expo from 'expo';
import { AsyncStorage } from 'react-native'
import { navReducer,AppNavigator } from './src/reducers/NavReducer';

class App extends Component {
  render() {
    const { nav, dispatch } = this.props;

    const state = AsyncStorage.getItem('token')
      ? this.props.nav.planeListState
      : this.props.nav.loginState;

    return (
      <AppNavigator
        screenProps={{ store: { store } }}
        navigation={addNavigationHelpers({
          dispatch: this.props.dispatch,
          state: this.props.nav
        })}
      />
    );
  }
}

const mapStateToProps = (state) => ({
  nav: state.nav
});

const AppWithNavigationState = connect(mapStateToProps)(App);

const initialState = {
  auth: { isLoading: false, error: null, username: '', password: '' },
  insert: { wasInserted: false }
};

const rootReducer = combineReducers
  (
  {
    nav: navReducer, auth: authReducer, register: registerReducer, planeList: planeReducer, insert: insertReducer
  }
  );

let store = createStore(rootReducer, initialState, applyMiddleware(thunk));

export default function Root() {
  return (
    <Provider store={store}>
      <AppWithNavigationState />
    </Provider>
  );
}

Routes.js

import LoginComponent from "../components/Login";
import RegisterComponent from "../components/Register";
import PlaneListComponent from "../components/PlaneList";
import InsertComponent from "../components/Insert";

const Routes = {
    Login: { screen: LoginComponent },
    Register: { screen: RegisterComponent },
    PlaneList: { screen: PlaneListComponent },
    Insert: { screen: InsertComponent }
};

export default Routes;

我的代码有什么问题会触发该错误？谢谢。

Answer 1

根据您的代码，我认为问题出在您的 navReducer

我建议你将你的 navReducer 名称更改为另一个并组合它并像这样创建新的 Reducer 名称 navReducer。

const navReducer = (state, action) => {
  const newState = AppNavigator.router.getStateForAction(action, state);

  // Simply return the original `state` if `nextState` is null or undefined.
  return newState || state;
};

我还将我的 react-native-redux-example 推送到我在 Github 上的存储库中 https://github.com/chen2584/react-native-redux-example

希望对您有所帮助！

Answer 2

刚刚经历了同样的错误消息：

在App的render方法中，你定义

const state = AsyncStorage.getItem('token')
  ? this.props.nav.planeListState
  : this.props.nav.loginState;

但是AppNavigator 中的addNavigationHelpers 属性正在传递参数state: this.props.nav。

我的猜测是你打算传入你之前定义的state（你目前没有使用它）。试试这个：

<AppNavigator
  screenProps={{ store: { store } }}
  navigation={addNavigationHelpers({
    dispatch: this.props.dispatch,
    state
  })}
/>