Partage
  • Partager sur Facebook
  • Partager sur Twitter

Erreur de type d'element

React Native

Sujet résolu
    19 mars 2021 à 10:06:35

    Bonjours,

    Je n'arrive pas à résoudre cette erreur mais je pense que cela vient d'un problème d'importation


    `Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    Check the render method of Feed.`

    Voici le composant qui pose prolbème

     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."
            }
        ]




    Et le fichier 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>
                   
            );
        }



    • Partager sur Facebook
    • Partager sur Twitter
      20 mars 2021 à 14:25:56

      Note à moi-même:

      TOUJOURS VÉRIFIER LE NOM DES VARIABLES :D

      {value_db.map(Post =>(<Post/>))}


      Post = Post :-°

      • Partager sur Facebook
      • Partager sur Twitter

      Erreur de type d'element

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown