IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Passer un tableau dans un component


Sujet :

React

  1. #1
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 132
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 132
    Par défaut Passer un tableau dans un component
    Bonjour à tous

    je crée une App avec React Native / Type script.

    Sur ma page principale, je collect des informations sur des terrains ou sont installés des sations.

    Je le fait ainsi:

    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    type Fields = {
      index: number,
      id_field: number,
      field_name: string,
      field_longname: string,
    }
      const fields:Fields[] = []
      data?.fields.map((field, index) =>{
        fields.push({
          index: index,
          id_field: field.id_field,
          field_name: field.field_name,
          field_longname: field.field_longname
        })
      })
      console.log("Fields")
      console.log(fields)
    Mon console.log m'affiche exactement ce que je demande.

    J'ai aussi créé un components qui va afficher le résultats dans un modal

    Sur ma page principale je fais appel à ce component ListFieldsModal et je dois passer mon tableau 'fields' pour que le component ListFieldsModal parcours le tableau et affiche les résultats

    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
      useEffect(() => {
    		navigation.setOptions({
    			headerRight: () => (
            <ListFieldsModal id={1} name={"dd"} dataset={fields}/>
    			)
    		});
     
        console.log("Effet")
    	}, []);

    J'arrive récupérer l'id (number) et le name (string), mais par contre, je ne sais pas comment passer un tableau. Voic en bas mon component au complet

    Ici
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    export function ListFieldsModal({style, id, name, dataset}:Props){
    je dois ajouter le dataset pour que je puisse le récuper.

    Par contre, dans mon component, je pense que je dois déclarer le tyage et j'ai essayé ceci

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    type Props = {
        style?: ViewStyle,
        id: number,
        name: string,
        dataset: { 
        }[]
    }
    type Props = {
        style?: ViewStyle,
        id: number,
        name: string,
        dataset: { 
            index: number,
            id_field: number,
            field_name: string,
            field_longname: string,
        }[]
    }
    Le problème que j'ai est que ceci

    Code dataset : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     console.log("Dataset 2:")
        console.log(dataset)
    et
    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <Row>
                        {dataset?.map((f, index) => (
                            f.field_longname
                        ))}
                    </Row>

    n'affuchent rien. J'ai l'impression que la valeur de 'fields' n'est pas passé dans dataset.
    Est.ce que c'est un problème de déclaration ou de typage?

    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
     
    import { Image ,ViewStyle, StyleSheet, Pressable, View, Text, Modal, Dimensions} from "react-native"
    import { ThemedText } from "./ThemedText"
     
    import { useThemeColors } from "@/hooks/useThemeColors";
    import { Link } from "expo-router";
    import { Shadows } from "@/constants/shadows";
    import { Row } from "./Row";
    import { useRef, useState } from "react";
    import FontAwesome from '@expo/vector-icons/FontAwesome6';
     
    type Props = {
        style?: ViewStyle,
        id: number,
        name: string,
        dataset: { 
            index: number,
            id_field: number,
            field_name: string,
            field_longname: string,
        }[]
    }
     
    export function ListFieldsModal({style, id, name, dataset}:Props){
        const colors = useThemeColors()
     
        const [isModalVisible, setModalVisibility] = useState(false)
        const buttonRef = useRef<View>(null)
        const [position, setPosition] = useState<null | {
            top: number, 
            right: number
        }>(null)
     
        const onButtonPress = () => {
            buttonRef.current?.measureInWindow((x, y, width, height) => {
                setPosition({
                    top: y + height + 5,
                    right: Dimensions.get("window").width - x - width + 5
                })
                setModalVisibility(true);
            })        
        }
     
        const onClose = () => {
            setModalVisibility(false);
        }
     
     console.log("Dataset 2:")
        console.log(dataset)
     
        return (
            <>
                <Pressable onPress={onButtonPress} >
                    <View
                        ref={buttonRef} 
                        style={[styles.button, {backgroundColor: colors.white}]}
                    >
                        <FontAwesome name="map" size={20} color="gray" />
                    </View>
                </Pressable>
                <Modal
                    animationType="fade"
                    transparent
                    visible={isModalVisible}
                    onRequestClose={onClose}
                >
                    <Pressable style={styles.backdrop} onPress={onClose} />
     
                    <View style={[styles.popup, {backgroundColor: colors.white, ...position}]}>
                    <Row>
                        <Link style={styles.row} href={{pathname: "/station/[id]", params: {id:id}}} asChild>
                            <Pressable android_ripple={{color: colors.tint, foreground: true}} style={style}>  
                                <ThemedText variant="body" color="black">{name}</ThemedText>
                            </Pressable>
                        </Link>
                    </Row>
     
                    <Row>
                        {dataset?.map((f, index) => (
                            f.field_longname
                        ))}
                    </Row>
     
                    </View>
                </Modal>
            </>
        )
    }
     
    const styles = StyleSheet.create({
        row: {
        },
        button:{
            width: 30,
            height: 30,
            borderRadius: 25,
            flex:1,
            alignItems: 'center',
            justifyContent: 'center'
        },
        backdrop: {
            flex:1,
            backgroundColor: "rgba(240, 235, 235, 0.4)"
        },
        popup: {
            position: 'absolute',
     
            padding: 10,
            paddingTop: 16,
            gap: 16,
            borderRadius: 12,
        },
      });

    Merci pour vos lumières

  2. #2
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 132
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 132
    Par défaut
    Je crois que j'ai compris mon problème. Il est lié au

    J'explique après dès que j'aurai mis ceci au propre

  3. #3
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 132
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 132
    Par défaut
    C'est réglé !

    Pour résumer:

    Je récuoère des info grâce à une API que je stoke dans comme ceci

    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    type Fields = {
      index: number,
      id_field: number,
      field_name: string,
      field_longname: string,
      field_city: string,
      field_lat: number,
      field_lng: number
    }
     
      const fields:Fields[] = []
      data?.fields.map((field, index) =>{
        fields.push({
          index: index,
          id_field: field.id_field,
          field_name: field.field_name,
          field_longname: field.field_longname,
          field_city: field.field_city,
          field_lat: field.field_lat,
          field_lng: field.field_lng,
        })
      })
      console.log("Fields")
      console.log(fields)

    le console.log() affiche bien les info récupérés.

    Puis je dois passer ceci dans un componement qui va parcourir Fields pour afficher le contenu.

    Le problème que j'avais, est que j'utilise un useEffet

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
      useEffect(() => {
    		navigation.setOptions({
    			headerLeft: () => (
     
            //<ListFieldsModal id={1} name={"dd"} dataset={fields} />
     
           <View>
            <TouchableOpacity onPress={focusMap}>
    					<View style={{ padding: 10 }}>
                <Text>Hello</Text>
    					</View>
    				</TouchableOpacity>
            </View>
    			)
    		});
    et j'ai remarqué que le HELLO (avant, il y avait le component) s'affichait avant que l'API avait fini de récupérer les info. Donc évidemment, le const fields n'avait pas encore le contenu. Je l'ai donc placer le component ailleur, là oula page s'affiche après que l'API a fini son travail, soit après un loader qui attends que l'API ait fini pour afficher la Map

    Concernant le message d'erreur (voir photo attachée) que m'affichait VS Code, dans mon component, j'ai modifié ceci

    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    type Props = {
        style?: ViewStyle,
        id: number,
        name: string,
        dataset: [{ 
            index: number,
            id_field: number,
            field_name: string,
            field_longname: string,
            field_city: string,
            field_lat: number,
            field_lng: number
        }]
    }

    par

    Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    type Props = {
        style?: ViewStyle,
        id: number,
        name: string,
        dataset: { 
            index: number,
            id_field: number,
            field_name: string,
            field_longname: string,
            field_city: string,
            field_lat: number,
            field_lng: number
        }[]
    }
    Images attachées Images attachées  

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Passer un tableau dans un trigger
    Par piotrr dans le forum jQuery
    Réponses: 3
    Dernier message: 11/01/2010, 10h48
  2. Passer un tableau dans un lien
    Par Giantrick dans le forum Langage
    Réponses: 9
    Dernier message: 18/05/2009, 02h32
  3. [AJAX] passer un tableau dans xhr.send() ?
    Par beegees dans le forum AJAX
    Réponses: 10
    Dernier message: 23/03/2009, 15h39
  4. Réponses: 1
    Dernier message: 28/12/2006, 18h02
  5. [Tableaux] Passer un tableau dans une requête HTTP ??
    Par haffouff dans le forum Langage
    Réponses: 2
    Dernier message: 09/05/2006, 18h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo