HomeScreen渲染报错：元素类型无效，求排查导入导出问题

报错信息 #

元素类型无效：应为字符串（针对内置组件）或类/函数（针对复合组件），但得到的是：undefined。你可能忘记从定义组件的文件中导出它，或者混淆了默认导入和命名导入。

用户问题 #

我不清楚具体是哪里的导入或导出出现了错误，请求帮忙排查。

相关代码 #

HomeScreen 代码 #

import {
  View,
  Text,
  SafeAreaView,
  Image,
  TextInput,
  ScrollView,
} from "react-native";
import React, { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";
import {
  UserIcon,
  ChevronDownIcon,
  SearchIcon,
  AdjustmentsIcon,
} from "react-native-heroicons/outline";
import Categories from "../components/Categories";

const HomeScreen = () => {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);

  return (
    <SafeAreaView className="bg-white pt-5 flex-col">
      {/* Header */}
      <View className="flex-row pb-3 items-center mx-4 space-x-2 px-4">
        <Image
          source={{
            url: "https://links.papareact.com/wru",
          }}
          className="h-7 w-7 bg-gray-300 p-4 rounded-full"
        />
        <View className="flex-1">
          <Text className="font-bold text-gray-400 text-xs">Deliver Now !</Text>
          <Text className="font-bold text-xl">
            Current Location
            <ChevronDownIcon size={20} color="#00cc88" />
          </Text>
        </View>

        <UserIcon size={35} color="#00cc88" />
      </View>

      {/* Search */}
      <View className="flex-row items-center space-x-2 pb-2 mx-4 ">
        <View className="flex-row flex-1 space-x-2 bg-gray-200 p-3">
          <SearchIcon color="gray" size={20} />
          <TextInput
            placeholder="Restros and Cuisines"
            keyboardType="default"
          />
        </View>

        <AdjustmentsIcon color="#00cc88" />
      </View>

      {/* Body */}
      <ScrollView
        className="bg-gray-100"
        contentContainerStyle={{
          paddingBottom: 100,
        }}
      >
        {/* Categories */}
        <Categories />
        {/* Featured Rows */}
      </ScrollView>
    </SafeAreaView>
  );
};

export default HomeScreen;

Categories 组件代码 #

import { View, Text } from 'react-native'
import React from 'react'

const Categories = () => {`enter code here`
  return (
    <View>
      <Text>Categories</Text>
    </View>
  )
}

export default Categories

错误定位与解决 #

问题出在Categories组件的语法错误上：组件定义行const Categories = () => {enter code here中混入了多余的``enter code here` ``代码，导致组件无法被正确解析，最终返回undefined，触发报错。

修正后的Categories代码 #

import { View, Text } from 'react-native'
import React from 'react'

const Categories = () => {
  return (
    <View>
      <Text>Categories</Text>
    </View>
  )
}

export default Categories

另外可额外确认：HomeScreen中import Categories from "../components/Categories"的路径是否正确，确保Categories组件文件确实存在于../components/目录下，文件名后缀符合项目配置（如.js或.jsx）。

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