Bonjour,

Je suis le tutoriel suivant, à l'étape suivante : https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/4978176-utilisez-les-props . J'ai le message d'erreur suivant

undefined is not an object (evaluating 'film.title')

* Components\FilmItem.js:17:12 in render.

Mon code est le suivant (recopié sur le tutoriel) : Dans le fichier search.js :

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

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

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

export default Search

Dans le fichier FilmItem.js :

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

class FilmItem extends React.Component {
  // Components/FilmItem.js

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}>{film.title}</Text>
            <Text style={styles.vote_text}>{film.vote_average}</Text>
          </View>
          <View style={styles.description_container}>
            <Text style={styles.description_text} numberOfLines={6}>{film.overview}</Text>
          </View>
          <View style={styles.date_container}>
            <Text style={styles.date_text}>Sorti le {film.release_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

Si quelqu'un pouvait m'aider... Merci

-
Edité par DevMe 18 mars 2020 à 22:56:54

Bonjour,

Il y a une solution au problème. Pour moi, il ne s'agit qu'un problème de cycle de vie des composants. En fait, la valeur de this.props.film est undefined au moment du chargement du DOM. 

Un moyen de contourner le problème, tout d'abord ne pas déclarer la constante au départ, et utiliser les props directement dans JSX. Et ensuite, tester la props avant de l'afficher. Cela donne :

import React from 'react'
import { StyleSheet, View, Text, Image } from 'react-native'
class FilmItem extends React.Component {
// Components/FilmItem.js
render() {
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}>{this.props.film == undefined ? "" : this.props.film.title}</Text>
<Text style={styles.vote_text}>{this.props.film == undefined ? "" : this.props.film.vote_average}</Text>
</View>
<View style={styles.description_container}>
<Text style={styles.description_text} numberOfLines={6}>{{this.props.film == undefined ? "" : this.props.film.overview}}</Text>
</View>
<View style={styles.date_container}>
<Text style={styles.date_text}>Sorti le {{this.props.film == undefined ? "" : this.props.film.release_date}}</Text>
</View>
</View>
</View>
)
}
}

-
Edité par Kuartz 20 avril 2020 à 11:51:53

Salut je me permets d'intervenir également si jamais certains ont des soucis.

N'hésitez pas à caler un console.log(this.props) et regarder bien le formatage du json.

Parfois, le tuto va vous dire

this.props.navigation.state.params.idFilm

Mais si vous regardez la construction de l'objet, il faut plutôt aller dans la "route"

this.props.route.params.idFilm

const { film } = this.state

-
Edité par Mvit 18 septembre 2020 à 11:44:19