为什么我会得到这个“需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。”错误？

Question

我正在 React Native 中开发一个应用程序，但我不断收到此错误：

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.

Check the render method of `Home`.

我的应用程序的结构是这样的：

▼ MyProject
  ► .expo
  ► assets
  ▼ components
    HomeHeader.js
    index.js
    RestaurantCard.js
  ▼ constants
      assets.js
      dummy.js
      index.js
      theme.js
  ► node_modules
  ▼ screens
      Home.js
  App.js
  app.json
  babel.config.js
  package-lock.json
  package.json

以下是一些相关文件：

App.js

import { StatusBar } from 'expo-status-bar';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

import Home from './screens/Home';

const Stack = createStackNavigator();

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'transparent'
  }
};

const App = () => {
  return (
    <NavigationContainer theme={theme}>
      <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Home.js

import { useState } from 'react';
import { View, SafeAreaView, FlatList, Text } from 'react-native';

import { COLORS } from '../constants';
import { HomeHeader, RestaurantCard } from '../components';

const Home = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
        <HomeHeader background={COLORS.white} />
    </SafeAreaView>
  )
}

export default Home

HomeHeader.js

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

import { COLORS, SIZES, assets } from '../constants'

const HomeHeader = () => {
    return (
        <View style={{
            backgroundColor: COLORS.white,
            padding: SIZES.font
        }}>
            <View style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center'
            }}>
                <View style={{ marginTop: SIZES.font }}>
                    <View style={{
                        width: '100%',
                        borderRadius: SIZES.font,
                        backgroundColor: COLORS.gray,
                        flexDirection: 'row',
                        alignItems: 'center',
                        paddingHorizontal: SIZES.font,
                        paddingVertical: SIZES.small
                    }}>
                        <Image
                            source={assets.search}
                            resizeMode="contain"
                            style={{ width: 20, height: 20, marginRight: SIZES.base }}
                        />
                        <TextInput
                            placeholder="Search"
                            style={{ flex: 1, onChangeText: () => { } }}
                        />
                    </View>
                </View>
            </View>
        </View>
    )
}

export default HomeHeader

components/index.js

import HomeHeader from "./HomeHeader";
import RestaurantCard from "./RestaurantCard";

export { HomeHeader, RestaurantCard };

我尝试从 Home.js 中删除行

<HomeHeader background={COLORS.white} />

，然后就没有错误了，但是一旦使用该组件，它就会给我错误。哪里出错了？

Answer 1

我认为发生错误是因为你试图在

style

道具中渲染一个不存在的道具。

这个道具是

OnChangeText

。

onChangeText

是

<TextInput/>

组件的道具。

请尝试像这样渲染这个组件，看看它是否有效：

  <TextInput
     placeholder="Search"
     style={{ flex: 1}}
     onChangeText: () => {yourSetStateFunction()}
      />