Bonjour à tous,

Je ne suis qu'au début du cours et je rencontre un problème lors du rendu du component <FilmItem />.

Le message d'erreur dit ceci (j'utilise un émulateur pour me faciliter la vie) :

Et voici mon code :

App.js

import React from 'react';
import { View } from 'react-native';
import Search from './components/search';

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Search />
      </View>
    );
  }
}

Search.js

import React from 'react';
import { StyleSheet, View, Button, TextInput, FlatList, Text} from 'react-native';
import FilmItem from './filmItem';
import films from '../helpers/filmsData';

class Search extends React.Component {
  render() {
    return (
      <View style={styles.main_container}>
        <TextInput style={styles.textinput} placeholder='Titre du film'/>
        <Button style={{height: 50}} title='Rechercher' onPress = {() => {}} />
        <FlatList
          data={films}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({item}) => <FilmItem film={item}/>}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create ({
  main_container: {
    marginTop: 20,
    flex: 1
  },
  textinput: {
    marginLeft: 5,
    marginRight: 5,
    height: 50,
    borderColor: '#0000',
    borderWidth: 1,
    paddingLeft: 5
  }
})

export default Search

et FilmItem.js

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

class FilmItem extends React.Component {
  render() {
      const film = this.props.film
      return (
        <View style={styles.main_container}>
          <Image
            style={styles.image}
            source={{uri: "image"}}
          />
          <View style={styles.content_container}>
            <View style={styles.header_container}>
              <Text style={styles.title_text}>titre</Text>
              <Text style={styles.vote_text}>vote</Text>
            </View>
            <View style={styles.description_container}>
              <Text style={styles.description_text} numberOfLines={6}>description</Text>
            </View>
            <View style={styles.date_container}>
              <Text style={styles.date_text}>Sorti le :date</Text>
            </View>
          </View>
        </View>
      )
  }
}

const styles = StyleSheet.create({
  main_container: {
    height: 190,
    flexDirection: 'row'
  },
  image: {
    width: 120,
    height: 180,
    margin: 5,
    backgroundColor: 'gray'
  },
  content_container: {
    flex: 1,
    margin: 5
  },
  header_container: {
    flex: 3,
    flexDirection: 'row'
  },
  title_text: {
    fontWeight: 'bold',
    fontSize: 20,
    flex: 1,
    flexWrap: 'wrap',
    paddingRight: 5
  },
  vote_text: {
    fontWeight: 'bold',
    fontSize: 26,
    color: '#666666'
  },
  description_container: {
    flex: 7
  },
  description_text: {
    fontStyle: 'italic',
    color: '#666666'
  },
  date_container: {
    flex: 1
  },
  date_text: {
    textAlign: 'right',
    fontSize: 14
  }
})

export default FilmItem

Je ne poste pas filmsData vu que c'est un objet statique auquel je n'ai pas touché.

J'ai sûrement fait une bête faute quelque-part, mais malgré des tests et des recherches, je n'ai pas encore réussi à résoudre mon problème...

Merci pour votre aide et d'avance bon WE.

Bonjour,

Est-ce que tu fais bien un export default dans ton fichier filmData ?
Dans tes imports, es-tu sûr du nom de tes fichiers (FilmItem.js --> import ... from './FilmItem et pas ./filmItem) ?

Bonsoir,

J'ai vérifié mes noms de fichiers et les chemins, tout est correct.

Voici le contenu de mon fichier filmsData.js (c'est un copié-collé du cours pour être sûr de ne pas faire de faute) :

export default data = [
   {
      id:181808,
      vote_average:7.2,
      title:"Star Wars VIII - Les derniers Jedi",
      poster_path:"",
      original_title:"Star Wars: The Last Jedi",
      overview:"Nouvel épisode de la saga. Les héros du Réveil de la force rejoignent les figures légendaires de la galaxie dans une aventure épique qui révèle des secrets ancestraux sur la Force et entraîne de choquantes révélations sur le passé…",
      release_date:"2017-12-13"
   },
   {
      id:181809,
      vote_average:8.1,
      title:"La Guerre des étoiles",
      poster_path:"",
      original_title:"Star Wars",
      overview:"Il y a bien longtemps, dans une galaxie très lointaine... La guerre civile fait rage entre l'Empire galactique et l'Alliance rebelle. Capturée par les troupes de choc de l'Empereur menées par le sombre et impitoyable Dark Vador, la princesse Leia Organa dissimule les plans de l’Étoile Noire, une station spatiale invulnérable, à son droïde R2-D2 avec pour mission de les remettre au Jedi Obi-Wan Kenobi. Accompagné de son fidèle compagnon, le droïde de protocole C-3PO, R2-D2 s'échoue sur la planète Tatooine et termine sa quête chez le jeune Luke Skywalker. Rêvant de devenir pilote mais confiné aux travaux de la ferme, ce dernier se lance à la recherche de ce mystérieux Obi-Wan Kenobi, devenu ermite au cœur des montagnes désertiques de Tatooine...",
      release_date:"1977-05-25"
   }
]

Merci pour ton aide, bonne soirée.

-
Edité par MaximeVanderwegen 20 janvier 2019 à 10:32:35

Bonjour,

Finalement, mon problème s'est résolu de lui-même... J'ai repris le contenu des fichiers donnés en début de chapitre, et à partir de là tout s'est bien exécuté... Je n'ai pas compris d'où venait le souci, mais il est résolu, c'est le principal .

Ayant le même problème, j'ai réussi à trouver la source de l'erreur, il s'agit de la variable data, il faut la déclarer.

j'avais le même problème, cela est peut être un oublie ou mise à jour du code ?

Voici la solution pour ma part :

// Helpers/filmsData.js
var data = [
   {
      id:181808,
      vote_average:7.2,
      title:"Star Wars VIII - Les derniers Jedi",
      poster_path:"",
      original_title:"Star Wars: The Last Jedi",
      overview:"Nouvel épisode de la saga. Les héros du Réveil de la force rejoignent les figures légendaires de la galaxie dans une aventure épique qui révèle des secrets ancestraux sur la Force et entraîne de choquantes révélations sur le passé…",
      release_date:"2017-12-13"
   },
   {
      id:181809,
      vote_average:8.1,
      title:"La Guerre des étoiles",
      poster_path:"",
      original_title:"Star Wars",
      overview:"Il y a bien longtemps, dans une galaxie très lointaine... La guerre civile fait rage entre l'Empire galactique et l'Alliance rebelle. Capturée par les troupes de choc de l'Empereur menées par le sombre et impitoyable Dark Vador, la princesse Leia Organa dissimule les plans de l’Étoile Noire, une station spatiale invulnérable, à son droïde R2-D2 avec pour mission de les remettre au Jedi Obi-Wan Kenobi. Accompagné de son fidèle compagnon, le droïde de protocole C-3PO, R2-D2 s'échoue sur la planète Tatooine et termine sa quête chez le jeune Luke Skywalker. Rêvant de devenir pilote mais confiné aux travaux de la ferme, ce dernier se lance à la recherche de ce mystérieux Obi-Wan Kenobi, devenu ermite au cœur des montagnes désertiques de Tatooine...",
      release_date:"1977-05-25"
   }
];
export default data

Ayant le même problème, j'ai réussi à trouver la source de l'erreur, il s'agit de la variable data, il faut la déclarer. J'avais le même problème, cela est peut être un oublie ou mise à jour du code ? Voici la solution pour ma part

Merci beaucoup @AxelPawelczyc ! C'était ça le problème dans mon cas aussi!