Bonjour,

J'ai un souci avec React Native.

Voici mon premier fichier:

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

export default function Search() {
    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 track={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
  }
})

Et mon second: 

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

export default function TrackItem() {
    // const track = this.props.track;
    // console.log(props.track);
    console.log(this.props)
    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}>{track.title}</Text>
            <Text style={styles.vote_text}>{track.vote_average}</Text>
          </View>
          <View style={styles.description_container}>
            <Text style={styles.description_text} numberOfLines={6}>{track.overview}</Text>
            {/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
          </View>
          <View style={styles.date_container}>
            <Text style={styles.date_text}>Sorti le {track.realease_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
  }
})

Mon problème étant que j'ai l'erreur suivante Cannot read property 'props' of undefined

Avez-vous une idée de comment la corriger ? 

Merci

Un soucis avec React plutôt non ? C’est voulu de ne pas utiliser des composants ?

Je ne connais pas grand chose à React mais si je tape "react props" dans Google je tombe sur https://fr.reactjs.org/docs/components-and-props.html et ça ne correspond pas à ce que tu fais.

Pour me donner un lien de docs que j'ai déjà lu, merci je sais faire. Je suis juste en train de suivre le cours sur ce site qui est sur une ancienne version, je suis sur la dernière et donc j'aimerais comprendre en me montrant par du concret (et pas par un lien) l'erreur dans le code afin de savoir quels sont les changements.

De plus il s'agit de doc sur React et je suis sur React Native.

-
Edité par CanadianDeer 7 avril 2020 à 19:54:28

Je crois que tu ne comprends pas, surtout que plus haut j'ai bien mentionné que ton lien renvoie vers de la doc de React JS et pas React Native..

Enfin bon, cette discussion ne me débloquera pas.

-
Edité par CanadianDeer 7 avril 2020 à 21:59:13

React Native est basé sur React. J'avoue que je suis surpris que tu donnes des leçons alors que tu ne connais rien au sujet.

Sur la doc de React et celle de React Native il est indiqué que les props d'une fonction composant sont passés en argument.

Bonjour un component purement fonctionel en reactjs où react native reçoit ses props dans le parmètre du constructeur:

export default function TrackItem({
	track
}) {
    // const track = this.props.track;
    // console.log(props.track);
    console.log( track ) ;

    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}>{track.title}</Text>
            <Text style={styles.vote_text}>{track.vote_average}</Text>
          </View>
          <View style={styles.description_container}>
            <Text style={styles.description_text} numberOfLines={6}>{track.overview}</Text>
            {/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
          </View>
          <View style={styles.date_container}>
            <Text style={styles.date_text}>Sorti le {track.realease_date}</Text>
          </View>
        </View>
      </View>
    );
}

où sur cette syntaxe si tu préféres:

export default function TrackItem( props ) {
    // const track = this.props.track;
    // console.log(props.track);
    console.log( props.track ) ;

    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}>{track.title}</Text>
            <Text style={styles.vote_text}>{track.vote_average}</Text>
          </View>
          <View style={styles.description_container}>
            <Text style={styles.description_text} numberOfLines={6}>{track.overview}</Text>
            {/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
          </View>
          <View style={styles.date_container}>
            <Text style={styles.date_text}>Sorti le {track.realease_date}</Text>
          </View>
        </View>
      </View>
    );
}

la donnée this.props fait référence au props dans un component écrit avec la syntaxe des class:

import React from 'react';

export default class TrackItem extends React.Component {

	render() {
    
    	console.log( this.props ) ;
    
    	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}>{track.title}</Text>
            <Text style={styles.vote_text}>{track.vote_average}</Text>
          </View>
          <View style={styles.description_container}>
            <Text style={styles.description_text} numberOfLines={6}>{track.overview}</Text>
            {/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
          </View>
          <View style={styles.date_container}>
            <Text style={styles.date_text}>Sorti le {track.realease_date}</Text>
          </View>
        </View>
        
      </View> 
      ) ;
    }

}

Tu peut revoir le code d'exemple de la doc de reactnative sur les props ici

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

function Cat(props) {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
  
}

-
Edité par SamuelGaborieau3 8 avril 2020 à 0:11:44