Redux + React-Navigation：TypeError：无法读取未定义的属性“未定义”答案

【问题标题】：Redux + React-Navigation: TypeError: Cannot read property 'undefined' of undefinedRedux + React-Navigation：TypeError：无法读取未定义的属性“未定义”
【发布时间】：2018-01-24 15:05:15
【问题描述】：

我无法调试此错误。我正在将 react-navigation 的 Stack Navigator 与 Redux 集成，并且在初始化 Store 时遇到了麻烦。我有一个非常简单的结构。提前致谢

注册组件：

    const App = () => {    
      return (
        <Provider store={createStore(reducers)}>
          <AppWithNavigationState />
        </Provider>
      );
    };

Redux 连接组件：

class AppWithNavigationState extends Component {
  render() {
    console.log('rendered AppWithNavigationState');

    return (
      <TopLevelRouter
        navigation={addNavigationHelpers({
          dispatch: this.props.dispatch,
          state: this.props.nav
        })}
      />
    );
  }
}
const mapStateToProps = (state) => {
  return { nav: state.nav };
};

export default connect(mapStateToProps)(AppWithNavigationState);

堆栈导航器：

const Routes = {
  Profile: { screen: ProfileScreen },
};

export const TopLevelRouter = StackNavigator(Routes);

和减速器：

export default combineReducers({
  nav: NavigationReducer,
  loggedIn: AuthReducer
});

和

const initialState = TopLevelRouter.router.getStateForAction(
  TopLevelRouter.router.getActionForPathAndParams('Profile'));


export default (state = initialState, action) => {
  const newState = TopLevelRouter.router.getStateForAction(state, action);
  return newState || state;
};

完整的堆栈跟踪：

TypeError: Cannot read property 'undefined' of undefined

This error is located at:
    in App (at renderApplication.js:35)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
Object.getStateForAction
\src\routers\StackRouter.js:158:40
exports.default
\src\reducers\NavigationReducer.js:19:41
<unknown>
\node_modules\redux\lib\combineReducers.js:53:23
assertReducerShape
\node_modules\redux\lib\combineReducers.js:51:24
combineReducers
\node_modules\redux\lib\combineReducers.js:107:4
<unknown>
\src\reducers\index.js:5:31
loadModuleImplementation
\node_modules\metro\src\lib\polyfills\require.js:213:4
guardedLoadModule
\node_modules\metro\src\lib\polyfills\require.js:147:11
_require
\node_modules\metro\src\lib\polyfills\require.js:131:2

【问题讨论】：

您能否控制台记录 TopLevelRouter 导入以确保您正确导入它？导出时不要设置为default。
感谢 Travis，我正在使用 import { TopLevelRouter }。我在NavigationReducer 文件中的控制台日志显示 TopLevelRouter 是以下函数：` NavigationContainer(props) { classCallCheck(this, NavigationContainer); var _this = _possibleConstructorReturn(this, (NavigationContainer.__proto_ || Object.getPrototypeOf(Navigati…`
console.log(TopLevelRouter.router) 怎么样？如果它不是未定义的，那么我不确定是什么导致了未定义的未定义错误。某处未正确导入或设置的东西：-\
renderApplication.js:35 的哪一行？
对您的第一条评论，似乎工作正常，返回一个函数对象：{getComponentForState: ƒ, getComponentForRouteName: ƒ, getStateForAction: ƒ, getPathAndParamsForState: ƒ, getActionForPathAndParams: ƒ, ...}

标签： react-native redux react-navigation

【解决方案1】：

截至 2018 年 1 月下旬，React Navigation 的 redux 集成正在迅速变化。它现在具有事件侦听器要求，请参阅 github 示例。

我无法查明确切的错误，但我从头开始并遵循本指南取得了成功：https://medium.com/async-la/a-stately-guide-to-react-navigation-with-redux-1f90c872f96e

请注意，您必须向根导航路由器添加一个侦听器，该指南未涵盖此内容

【讨论】：