React Native+Redux中this.props.fetchUser未定义的TypeError问题

我使用React Native、Redux和Expo进行开发，相关代码如下：

主组件代码 #

import React, { Component } from 'react'
import { View, Text} from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {connect} from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchUser } from '../redux/actions/index'

//import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

//const Tab = createBottomTabNavigator();

const Stack = createStackNavigator()

export class MainScreen extends Component {
    componentDidMount(){
        this.props.fetchUser()
    }
  render() {
    const {currentUser} = this.props;
    console.log(currentUser)

    if (currentUser == undefined){
        return(
          <View></View>
        )
    }
    
    return (
      <View style={{flex:1, justifyContent:'center'}}>
        <Text>{currentUser.firstname} User is Logged in</Text>
      </View>
    )
  }
}

const mapStateToProps = (store) => ({
  currentUser: store.userState.currentUser
})
const mapDispatchProps = (dispatch)=> bindActionCreators({fetchUser}, dispatch);

export default connect(mapStateToProps, mapDispatchProps)(MainScreen);

Action代码（redux/actions/index.js） #

import firebase from "@firebase/app-compat";
import { USER_STATE_CHANGE } from "../constants/index";

export function fetchUser(){
    return((dispatch) => {
        firebase.firestore()
        .collection("users")
        .doc(firebase.auth().currentUser.uid)
        .get()
        .then((snapshot)=> {
            if (snapshot.exists){
                dispatch({type: USER_STATE_CHANGE, currentUser:snapshot.data()})
            }
            else{
                console.log('does not exist')
            }
        })
    })
}

错误信息 #

执行expo start -c启动项目时，出现如下错误：

TypeError: this.props.fetchUser is not a function. (In 'this.props.fetchUser()', 'this.props.fetchUser' is undefined)

This error is located at:
    in MainScreen (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:217)
    in RCTView (at View.js:32)
    in View (at CardContainer.tsx:281)
    in RCTView (at View.js:32)
    in View (at CardContainer.tsx:279)
    in RCTView (at View.js:32)
    ...

解决方案 #

1. 确认组件导入使用默认导出 #

检查导航配置或其他地方对MainScreen的导入，确保导入的是默认导出的组件（即被connect包装后的版本），而非命名导出的原始MainScreen类。如果导入的是未连接Redux的类，自然无法获取fetchUser方法。

2. 验证Redux Provider配置 #

确保项目根组件外层已正确包裹Provider组件，并传入了Redux store。示例：

import { Provider } from 'react-redux';
import store from './redux/store';

export default function App() {
  return (
    <Provider store={store}>
      {/* 导航组件或其他根组件 */}
    </Provider>
  );
}

没有Provider的情况下，connect不会生效，组件无法从Redux获取props。

3. 简化mapDispatchToProps写法 #

可以直接将action函数作为对象传递给connect的第二个参数，Redux会自动绑定dispatch，避免手动使用bindActionCreators可能出现的错误：

// 替换原有的mapDispatchProps和connect调用
export default connect(mapStateToProps, { fetchUser })(MainScreen);

4. 增加用户登录状态判断（避免后续报错） #

虽然这不是导致fetchUser未定义的直接原因，但如果firebase.auth().currentUser为null，后续会触发新的错误，建议在action中添加判断：

export function fetchUser(){
    return((dispatch) => {
        const currentUser = firebase.auth().currentUser;
        if (!currentUser) {
            console.log('用户未登录');
            return;
        }
        firebase.firestore()
        .collection("users")
        .doc(currentUser.uid)
        .get()
        .then((snapshot)=> {
            if (snapshot.exists){
                dispatch({type: USER_STATE_CHANGE, currentUser:snapshot.data()})
            }
            else{
                console.log('用户文档不存在')
            }
        })
    })
}

内容的提问来源于stack exchange，提问作者Boldplut0