如何修复React Native中的「Error: Element type is invalid」错误？

我是React Native新手，想要开发一个包含可交互地图的应用。跟着视频实现点击地图标记显示卡片的功能，写到15:55的代码（去掉了不需要的搜索栏和下方的“chips”部分），但一直遇到以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

错误提示需检查MapScreen的render方法，错误位置在：

in AIRGoogleMap (created by MapView)
in MapView (created by MapScreen)
in RCTView (created by View)

我已经了解默认导出与命名导出的区别，原本markers数组是从其他文件命名导出的，移到当前文件后仍未解决问题，即使此时没有导入自己的文件。之后重新对照视频注释掉所有不需要的代码到15:55，错误依然存在。

以下是我的代码：

import React, { useEffect } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Animated,
    Image,
    TouchableOpacity,
    Dimensions,
    Platform,
} from "react-native";
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";

const Images = [
    { image: require('../../../assets/images/marker.png') },
    //...
];

const markers = [
    {
        coordinate: {
            latitude: 32.7755,
            longitude: 96.8089,
        },
        title: "Reunion Tower",
        description: "Good views",
        image: Images[0].image,
        rating: 4,
        reviews: 99,
    },
    //... (4 other markers I am editing out)
];

const { width, height } = Dimensions.get("window");
const CARD_HEIGHT = 220;
const CARD_WIDTH = width * 0.8;
const SPACING_FOR_CARD_INSET = width * 0.1 - 10;

const MapScreen = () => {
    const initialMapState = {
        markers,
        region: {
            latitude: 22.62938671242907,
            longitude: 88.4354486029795,
            latitudeDelta: 0.04864195044303443,
            longitudeDelta: 0.040142817690068,
        },
    };

    const [state, setState] = React.useState(initialMapState);

    const _map = React.useRef(null);
    const _scrollView = React.useRef(null);

    return (
        <View style={styles.container}>
            <MapView
                ref={_map}
                initialRegion={state.region}
                style={styles.container}
                provider={PROVIDER_GOOGLE}
            >
                {state.markers.map((marker, index) => {
                    return (
                        <MapView.Marker key={index} coordinate={marker.coordinate} onPress={(e) => onMarkerPress(e)}>
                            <Animated.View style={[styles.markerWrap]}>
                                <Animated.Image
                                    source={require('../../../assets/images/marker.png')}
                                    style={[styles.marker]}
                                    resizeMode="cover"
                                />
                            </Animated.View>
                        </MapView.Marker>
                    );
                })}
            </MapView>
            <Animated.ScrollView
                horizontal
                scrollEventThrottle={1}
                showsHorizontalScrollIndicator={false}
                style={styles.scrollView}
            >
                {state.markers.map((marker, index) => (
                    <View style={styles.card} key={index}>
                        <Image
                            source={marker.image}
                            style={styles.cardImage}
                            resizeMode="cover"
                        />
                        <View style={styles.textContent}>
                            <Text numberOfLines={1} style={styles.cardtitle}>{marker.title}</Text>
                            <Text numberOfLines={1} style={styles.cardDescription}>{marker.description}</Text>
                        </View>
                    </View>
                ))}
            </Animated.ScrollView>
        </View>
    );
};

export default MapScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    //...
});

排查与解决方法 #

• 检查react-native-maps配置
  确保已正确安装依赖，且Android/iOS端的Google Maps API密钥配置完成。如果未配置Google Maps，移除provider={PROVIDER_GOOGLE}属性，改用默认提供商测试。
• 定义缺失的onMarkerPress函数
  代码中绑定了未定义的onMarkerPress，补充定义：

  const onMarkerPress = (e) => {
      // 添加点击逻辑，比如定位到对应卡片
      console.log('标记被点击', e);
  };
  

• 清除缓存重启项目
  执行npx react-native start --reset-cache清除缓存后重启，避免缓存导致组件加载异常。

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