reactjs - 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 程序中遇到这种类型的错误
解决方案
可能是因为笔误。FlateList 不正确。请改用 FlatList。
推荐阅读
- mysql - 如何插入多行
- javascript - 无法读取未定义的属性“类型”-redux
- php - 如何使用 htaccess 在 index.php 上获取斜杠 url 参数
- r - ggplot中的相同比例
- sqlite - 为 LabVIEW 2018 32 位安装 SQLite 库
- angular - 使用角材料的最小角版本
- linux - 创建自动 EBS 快照
- excel - 在 SAS Enterprise Guide 中导出带密码的 excel 文件
- python - python - 将返回变量从一个函数传递/发送到另一个函数
- angular - Angular 和 Cloud Firestore Observable 未完成