使用 react-navigation stack navigator react-native 调用 redux 函数时，将 this.props.someFunction 设为未定义

Question

我不确定这是否是我的代码的问题，但我在尝试访问通过 react-navigation 堆栈导航器连接到组件的 redux 调度函数时遇到问题，我收到一条错误消息：

TypeError: storeUser 不是函数

但是当调用没有堆栈导航器的组件时，我可以访问调度函数。

使用堆栈导航器调用调度函数的代码：

UnAuthenticatedStack 堆栈导航器：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack'
import { Login } from '../../../screens/Login';
import { Register } from '../../../screens/Register';

const Stack = createStackNavigator();


export function UnAuthenticatedStack({navigation, route}) { 
    return (
      <Stack.Navigator key="unauthenticated-stack" initialRouteName="Login" screenOptions={{ header: () => { return null } }}>
          <Stack.Screen name="Login" component={Login}></Stack.Screen>
          <Stack.Screen name="Register" component={Register}></Stack.Screen>
      </Stack.Navigator>
  );
}

应用：

import 'react-native-gesture-handler';
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import { connect } from 'react-redux'
import Commands from './services/data/local/reducers/Commands';
import { NavigationContainer } from '@react-navigation/native'
import {UnAuthenticatedStack} from './services/navigation/stack-navigation/UnAuthenticatedStack'

class App extends React.Component {

  constructor(props) {
    super(props)
    //console.disableYellowBox = true;
  }

  render() {
    return (
        <NavigationContainer>
          <UnAuthenticatedStack></UnAuthenticatedStack>
        </NavigationContainer>
      );
  }
};



const mapStateToProps = (state) => {
  return {
    user: state.user,
    settings: state.settings
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    storeUser: (user) => dispatch({type: Commands.list.store_user_data, payload: user}),
    setLang: (lang) => dispatch({type: Commands.list.set_language, payload: lang})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

登录：

import React, { Component } from 'react';
import { View, ScrollView, KeyboardAvoidingView, Text, Image } from 'react-native';
import { connect } from 'react-redux'

export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
        lang: "en"
    };
  }

  render() {
    const {storeUser} = this.props
    console.log(storeUser)
    return (
        <View><Text>This is login screen</Text></View>
     )

  }

};

const mapDispatchToProps = (dispatch) => {
  return {
    storeUser: (userSessionData) => dispatch({type: Commands.list.store_user_data, payload: userSessionData})
  }
}

const mapStateToProps = (state) => {
  return {
    user: state.user
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

这是我直接调用组件而不将其包装在 NavigationContainer 上时的代码：

应用：

import 'react-native-gesture-handler';
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import { connect } from 'react-redux'
import Commands from './services/data/local/reducers/Commands';
import { NavigationContainer } from '@react-navigation/native'
import {UnAuthenticatedStack} from './services/navigation/stack-navigation/UnAuthenticatedStack'

class App extends React.Component {

  constructor(props) {
    super(props)
    //console.disableYellowBox = true;
  }

  render() {
    return (
        <Login></Login>
      );
  }
};

更新：我尝试在第一种情况下记录 storeUser，但在第二种情况下，当在 App 组件上调用 Login 组件时，我可以看到在输出中定义的 storeUser。

Answer 1

经过数小时的试验和调试，我发现我在 UnAuthenticatedStack 堆栈导航器中将登录屏幕导入为：

import { Login } from '../../../screens/Login'

当我使用export default 导出登录组件时应该是以下内容：

import Login from '../../../screens/Login'