首页 > 解决方案 > React js-元素类型无效:

问题描述

这是我的SecExercise

import React from "react";
import {Text,FlateList,StyleSheet} from "react-native";
const SecExercise=()=>{
    const login=[{user:"admin",pwd:1234},
    {user:"ece",pwd:2023},
    {user:"eee",pwd:3232},
    {user:"non-teach",pwd:222},
    {user:"cse",pwd:1234},
    {user:"mech",pwd:4234},
    {user:"cvil",pwd:2234},
    {user:"bio",pwd:1214},
    {user:"hr",pwd:1274}]

    return(
        <FlateList
            keyExtractor={signin=>{signin.user}}
            data={login}
             renderItem={({item})=>{
                return <Text style={styles.textStyle}>
                    username:{item.user}
                    password:{item.pwd}
                    </Text>;
                 }}/>

    );

};
const styles = StyleSheet.create({
    textStyle: {
      fontSize: 30,
      backgroundColor:'#fedede'
      
    }
  });
export default SecExercise;

** 这是我的 App.js 文件 **

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './src/screens/HomeScreen';
import ComponentsScreen from './src/screens/ComponentsScreen';
import FirstExercise from "./src/screens/FirstExercise";
import ListScreen from "./src/screens/ListScreen";
import SecExercise from "./src/screens/SecExercise";
import ButtonAction from "./src/screens/ButtonAction";

const navigator = createStackNavigator(
  {
    Home: HomeScreen,
    Component:ComponentsScreen,
    First:FirstExercise,
    List:ListScreen,
    Second:SecExercise,
    ButtonsDemo:ButtonAction


  },
  {
    initialRouteName: 'ButtonsDemo',
    defaultNavigationOptions: {
      title: 'App',
    },
  }
);

export default createAppContainer(navigator);

启动 npm 后,它将显示此类型错误 Element type is invalid: expected a string (for built-in components) or a class/function (for complex components) but got: undefined. 您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。

我之前做过同样的程序,但当时没有错误

没有错误的示例代码

import React from "react";
import {Text,FlatList} from "react-native";
const ListScreen=()=>{
    const nameAge=[
        {id:1,name:"keerthana",age:23},
        {id:2,name:"Rusanthiys",age:23},
        {id:3,name:"paranthaman",age:25},
        {id:4,name:"priyadrshini",age:21},
        {id:5,name:"saranya",age:30},

]
    return(
        <FlatList
        //horizontal
      showsHorizontalScrollIndicator={false}
      showsVerticalScrollIndicator={false} // if u want to hide scrollbar
       // keyExtractor={person=>{person.id}}
       keyExtractor={person=>{person.name}}
        data={nameAge}
        renderItem={({item})=>{
            return <Text style={{marginVertical:150}}> {item.name}-Age:{item.age}</Text>;
        }} 
        />


    );

    

};
export default ListScreen;

但我不知道为什么我在 secExercise 程序中遇到这种类型的错误

标签: reactjsreact-nativeexporender

解决方案


可能是因为笔误。FlateList 不正确。请改用 FlatList。


推荐阅读