Bonjour, 

Je suis actuellement le cours de React Native : https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/5046301-concevez-une-navigation-entre-vos-vues

Je suis bloqué à cet endroit : 

// Components/Search.js

class Search extends React.Component {

  _displayDetailForFilm = (idFilm) => {
    console.log("Display film with id " + idFilm)
  }
  
  ...
}

// Components/Search.js

class FilmItem extends React.Component {
  render() {
    const { film, displayDetailForFilm } = this.props
    return (
        <View
            style={styles.main_container}
            onPress={() => displayDetailForFilm(film.id)}> // On définit la props onPress sur notre View pour appeler notre fonction displayDetailForFilm
            ...
        </View>
    )
  }
}

Voici l'erreur obtenu : 

TypeError: displayDetailForFilm is not a function. (In 'displayDetailForFilm(film.id)', 'displayDetailForFilm' is undefined)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

Je suppose que beaucoup ont été bloqués dernièrement à cet étape. Je pense que le problème vient aussi du fait que le cours a été rédigé il y a un moment donc il y a une incompatibilité ? 

Merci pour votre coup de pouce 

-
Edité par scamp 8 avril 2021 à 19:02:27

Bonjour,

Il manque un _ à l'appel de ta fonction je suppose:

<View
    style={styles.main_container}
    onPress={() => _displayDetailForFilm(film.id)}> // On définit la props onPress sur notre View pour appeler notre fonction displayDetailForFilm
    ...
</View>

-
Edité par eclairia 8 avril 2021 à 19:06:13

Bonjour,

Merci pour ton retour :) 

je ne pense pas vu que j'ai récupéré la valeur comme ça :

// FilmItem.js 
class FilmItem extends React.Component {
  render() {
    const film = this.props.film;
    const displayDetailForFilm = this.props._displayDetailForFilm;
    console.log(film.id)
    return (
      <TouchableOpacity 
      onPress={() => displayDetailForFilm(film.id)}

et la fonction est passée ici : 

// Search.js 

render() {
        console.log(this.props)
        return(
            <View style={styles.View}>
                <TextInput 
                    onChangeText={(text) => this._searchTextInputChange(text)} 
                    onSubmitEditing={() => this._searchFilms()}
                    style={styles.TextInput} 
                    placeholder="Titre du film"/>
                <Button 
                    title="Rechercher" 
                    onPress={() => this._searchFilms()}/>
                <FlatList
                data={this.state.films}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({item}) => <FilmItem film={item} displayDetailForFilm={this._displayDetailForFilm}/>}
                onEndReachedThreshold={0.5}
                onEndReached={() => {
                    if (this.page < this.totalPage) {
                        this._loadFilms()
                        console.log('new call for page '+ this.page)
                        }
                    } 
                }
            />
            {this._displayLoading()}
            </View>
        )
    }

Bonjour je pense que le problème (avec le code que tu montres) et un nom de props passé et un nom de props récupéré qui et différent (donc qui n'existe pas)

Search.js into ligne 16

// Lorsque que tu rend le composant FilmItem tu lui à passé une props:
// "film" et une props "displayDetailForFilm" mais pas de props: "_displayDetailForFilm"
<FilmItem film={item} displayDetailForFilm={this._displayDetailForFilm}/>

FilmItem se fait envoyé une props film et une props displayDetailsForFilm mais dans le rendu de FilmItem tu essay d'accédé à une props:

_displayDetailsForFilm (qui n'est pas définit):

FilmItem.js

 class FilmItem extends React.Component {
  render() {
    const film = this.props.film;
    
    // il n'existe pas de props _displayDetailForFilm qui et définit pour FilmItem
    // film={item} displayDetailForFilm={this._displayDetailForFilm}
    // il devrait existé une props: film et une props: displayDetailForFilm 

    // const displayDetailForFilm = this.props._displayDetailForFilm;
    const displayDetailForFilm = this.props.displayDetailForFilm;

    // pour voir le contenut des props tu peut les loggé:
    console.log(this.props);
	console.log("film id:", film.id);

Hello, 

toujours la meme erreur : 

TypeError: _this.props.displayDetailForFilm is not a function. (In '_this.props.displayDetailForFilm(film.id)', '_this.props.displayDetailForFilm' is undefined)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

Object {
  "displayDetailForFilm": undefined,
  "film": Object {
    "adult": false,
    "backdrop_path": "/coJLkvK5KZQoMl8vGqcpgAZYroi.jpg",
    "genre_ids": Array [
      35,
      18,
    ],
    "id": 2639,
    "original_language": "en",
    "original_title": "Deconstructing Harry",
    "overview": "Harry, auteur célèbre en panne d'inspiration, est invité par son ancienne université, dont il fut jadis viré, pour un hommage. Il est brouillé avec tout le monde, ses femmes, ses maîtresses, ses psys et ne trouve pour l'accompagner à la cérémonie que Cookie, une prostituée noire, Richard, son ami cardiaque et Hilly, son jeune fils, qu'il a enlevé à la sortie de l'école.",
    "popularity": 9.397,
    "poster_path": "/XJHva6U5HLmv84Dk5H1zMXEytI.jpg",
    "release_date": "1997-12-12",
    "title": "Harry dans tous ses états",
    "video": false,
    "vote_average": 7.4,
    "vote_count": 575,
  },
}

-
Edité par scamp 17 avril 2021 à 17:56:48

Rebonjour tu reçoit une props avec la valeur undefined alors c'est qu'au niveau du component parent Search.js (qui envoi la props) elle était déjà undefined le component Search.js envoi la props depuis un attribut de this est-ce que la méthode _displayDetailForFilm existe réellement dans le component Search.js

Dans le component Search.js essai de faire un log de la props que tu envoi du genre:

// Search.js
render() {
    console.log(this._displayDetailForFilm)

    // ...
}

Si la valeur loggé et undefined ces que tu dois définir la fonction avant de l'envoyé sinon si elle n'est pas undefined et qu'elle correspond bien à la fonction qui doit être:

class Search extends React.Component {
 
  _displayDetailForFilm = (idFilm) => {
    console.log("Display film with id " + idFilm)
  }
   
  ...
}

C'est forcément que tu as fait une erreur dans le nom de props que tu as envoyé/récupéré entre les 2 components, la fonction elle c'est pas envolé ça peut être que ça...

Tu peut nous remontré le code des deux  composant que tu as mit à jour ?

Normalement il doit être plus où moins comme cela:

class Search extends React.Component {
 
  _displayDetailForFilm = (idFilm) => {
    console.log("Display film with id " + idFilm)
  }
  
  render() {
  
   console.log(this._displayDetailForFilm); // devrait log: [Function: _displayDetailForFilm]
  
  	return (
		<View style={styles.View}>
        	{# ... #}
            <FlatList
				data={this.state.films}
                keyExtractor={(item) => item.id.toString()}
                
                renderItem={({item}) => (
                	<FilmItem 
                    	film={item}
                        displayDetailForFilm={this._displayDetailForFilm} />
                )}
                onEndReachedThreshold={0.5}
                onEndReached={() => {
                    if (this.page < this.totalPage) {
                        this._loadFilms()
                        console.log('new call for page '+ this.page)
                        }
                    }
                }
            />
            {this._displayLoading()}
       </View>
    );
  }
   
 
}


class FilmItem extends React.Component {
  
  render() {
    const { film, displayDetailForFilm } = this.props;
    
    console.log(this.props);
    
    return (
        <TouchableOpacity
      		onPress={() => displayDetailForFilm(film.id)}>

            {# ... #}
		</TouchableOpacity>
    )
  }
}

-
Edité par SamuelGaborieau3 18 avril 2021 à 14:13:29