【发布时间】：2021-06-16 16:37:38
【问题描述】：
我在 react-native 中遇到了一个错误，我无法解决它，但它看起来像是一个导入错误 有人可以帮我吗？
错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。 检查Feed的渲染方法。
文件 Feed.js
import React, {useState} from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
import Layout from '../components/global/Layout';
import Post from '../components/Post'
import { ScrollView } from 'react-native-gesture-handler';
import firebase from '../provider/Firebase'
import { snapshotToArray } from '../components/utils/snapshotToArray';
//import value_db from '../value_db.json'
export default function Feed({navigation}) {
return (
<Layout >
{value_db.map(Post =>
(<Post
Title='Truc Machin - 10€'
Text='Blabla...'
User='Utilisateur'
Subtitle='Subtitle'
userPic='https://picsum.photos/31'
Picture='https://picsum.photos/701'
/>)
)}
{/*<Post
Title='Truc Machin - 5€'
Text='Très bon état et blabla...'
User='Utilisateur'
Subtitle='Subtitle'
userPic='https://picsum.photos/30'
Picture='https://picsum.photos/700'
/>*/}
</Layout>
);
}
const value_db = [
{
"id": "1",
"Title": "id",
"Picture": "https://picsum.photos/687",
"Price": 38,
"User": "King",
"UID": 9779152268,
"userPic": "https://picsum.photos/156",
"Text": "Consectetur aliquip pariatur tempor ullamco dolore mollit cillum sit elit nostrud ex. Velit pariatur pariatur enim proident laboris. Occaecat mollit dolore proident pariatur laboris fugiat enim cupidatat. Deserunt proident in exercitation velit dolor dolore sunt Lorem ullamco et reprehenderit ad."
},
{
"id": "2",
"Title": "do",
"Picture": "https://picsum.photos/326",
"Price": 18,
"User": "Lillie",
"UID": 6321689791,
"userPic": "https://picsum.photos/136",
"Text": "Eiusmod do veniam ullamco ipsum anim cupidatat pariatur ut eiusmod pariatur culpa id sint. Commodo cupidatat aliqua sint et adipisicing dolor ea elit duis do. Sit sint tempor incididunt aute fugiat consequat fugiat eu."
},
{
"id": "3",
"Title": "duis",
"Picture": "https://picsum.photos/338",
"Price": 36,
"User": "Marta",
"UID": 3013262044,
"userPic": "https://picsum.photos/177",
"Text": "Eiusmod consectetur qui nostrud eiusmod est ipsum non excepteur incididunt. Elit sunt mollit labore quis Lorem veniam. Deserunt officia aliqua voluptate culpa exercitation in reprehenderit Lorem qui ipsum fugiat consectetur excepteur cillum. Ullamco occaecat consectetur esse eu laboris officia id excepteur occaecat."
},
{
"id": "4",
"Title": "dolor",
"Picture": "https://picsum.photos/361",
"Price": 26,
"User": "Petty",
"UID": 4901356544,
"userPic": "https://picsum.photos/113",
"Text": "Nulla enim consectetur sint non pariatur duis eu duis qui duis ea veniam ex commodo. Nulla aliqua exercitation consequat consectetur cillum veniam fugiat ad ea deserunt in deserunt do dolor. Minim aliquip laborum ullamco proident fugiat dolore ipsum Lorem magna ullamco aliqua tempor. Consectetur quis ea do et esse nulla reprehenderit ipsum consequat tempor. Deserunt occaecat exercitation ex labore consectetur incididunt. Exercitation et laboris ad deserunt reprehenderit commodo ea id duis esse esse."
},
{
"id": "5",
"Title": "ex",
"Picture": "https://picsum.photos/778",
"Price": 9,
"User": "Valerie",
"UID": 4267318506,
"userPic": "https://picsum.photos/151",
"Text": "Cupidatat tempor magna elit aliqua consequat minim in ea. In laborum incididunt ea incididunt duis aliqua minim ipsum enim tempor laboris duis. Fugiat sit labore cupidatat consequat occaecat id velit Lorem amet officia magna."
},
{
"id": "6",
"Title": "Lorem",
"Picture": "https://picsum.photos/893",
"Price": 16,
"User": "Powell",
"UID": 3136072438,
"userPic": "https://picsum.photos/187",
"Text": "Fugiat culpa labore do consequat ullamco. Aliquip fugiat esse incididunt do enim do sunt qui commodo ea. Commodo et amet non tempor consequat in ullamco mollit ad. Aliqua fugiat voluptate do excepteur Lorem nulla commodo."
}
]
文件 Post.js
import React from 'react';
import { Avatar, Card, Title, Paragraph, Text, IconButton } from 'react-native-paper';
export default function (props) {
const LeftContent = () => <Avatar.Image size={40} source={{uri: props.userPic}}/>
return (
<Card>
<Card.Title title={props.User} subtitle={props.Price} left={LeftContent} />
<Card.Content>
<Title>{props.Title}</Title>
<Paragraph>{props.Text}</Paragraph>
</Card.Content>
<Card.Cover source={{ uri: props.Picture }} />
<Card.Actions>
<IconButton icon='heart' color={Colors.primary} onPress={() => onFavorite(props)}/>
<Text style={{color: Colors.primary}}> | </Text>
<IconButton icon='share' color={Colors.primary} onPress={() => onShare(props)}/>
<Text style={{color: Colors.primary}}> | </Text>
<IconButton icon='cash' color={Colors.primary} onPress={() => onBuy()}/>
<Text style={{color: Colors.primary}}> | </Text>
<IconButton icon='flag' color={Colors.primary} onPress={() => onReport(props)}/>
</Card.Actions>
</Card>
);
}
【问题讨论】：
-
您实际上是在尝试使用来自
map回调范围的Post参数作为 React 元素，而不是您导入的那个：import Post from '../components/Post'。重命名map回调中的Post参数：value_db.map(newPost => <Post ... />)或import语句中的参数：import PostComponent from '../components/Post'value_db.map(Post => <PostComponent ... />)
标签： javascript reactjs react-native