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:

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:

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:

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:

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:

1
2
 console.log("Dataset 2:")
    console.log(dataset)

et

Code:

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:

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

Je crois que j'ai compris mon problème. Il est lié au

Code:

useEffect(() => {}

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

1 pièce(s) jointe(s)

C'est réglé !

Pour résumer:

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

Code:

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:

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:

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:

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
    }[]
}