Bonjour à tous,
Je suis débutant et après avoir suivit le tuto "Créer une application React Native" j'arrive à faire n ruc de génial.
Merci encore pour ce tuto très complet.

Dans ce tuto, Grafikart nous à montrer comment utiliser une API pour récupérer des informations sur des Pokemon. Après avoir fait l'excercise du tuto, je fais mon application. Je dois récupérer les mesures de mes sations météo. Le problème est que mon JSON à plus de profondeur que ce qui est montré dans le tuto. Et la je galère.

Alors si grafikart ou une autre personne pouvais m'aider ca serait super top.

D'abors, voici mon API. Je résupère les infos de ma station 6. J'arrive récupérer les info sur la station mais pas les mesures de la station (ce qui se trouve dans 'measures'.

J'ai fait commce ceci:

Je récupère l'id et je fais ma requette

const params = useLocalSearchParams() as {id: string};
    const {data: getStation, isFetching} = useFetchQuery("/getstation/[id]", {id: params.id})

dans getStation, je peux faire:

<ThemedText>{getStation?.stations?.[0].station_longname}</ThemedText>

pour afficher le nom de la station. ca marche.

Maintenant, j'aimerais passer les messures dans <FlatList><StationCardDetail> puis<StationSpec />
(J'ai utilisé une FlatList pour avoir un loadeur, vur que j'ai pas mal de mesure)

<ThemedText>{getStation?.stations?.[0].station_longname}</ThemedText>
      <FlatList
         data={getStation?.stations} 
         numColumns={1}
         renderItem={({item}) => <StationCardDetail spec={} id_station={item.id_station} station_longname={item.station_longname} field={item.id_field.toString()} style={{flex:1/3}} />} keyExtractor={(item) => item.id_station.toString()}>
      </FlatList>

Le problème est que je ne sais pas comment faire avec spec={} car ce n'est ni du texte, ni un nombre, mais un array.

Avant de continué j'ai essayé ceci

<ThemedText>{getStation?.stations?.[0].measures?.[0].datasets?.[0].data?.[0]}</ThemedText>

Pour afficher la première valeur: 3.61, mais ca ne marche pas. J'ai ceci message

Type '{} | undefined' is not assignable to type 'ReactNode'.
  Type '{}' is not assignable to type 'ReactNode'.ts(2322)

Je en sais pas si je parcours bien mon JSON. Ausi je vais avoir besoin de passer les mesures qui se trouve dans

{getStation?.stations?.[0].measures?.[0].datasets?.[0].data?.[0]}

et

{getStation?.stations?.[0].measures?.[0].datasets?.[0].labels?.[0]}

Pour ces lignes, mon simulateur m'affiche le message d'erreur Can not read properties 'Datasets' of undefined

Mais dois-je le définir correctement?

Donc ma question, si je prends ca (qui se trouve dans ma FlatList)

 <StationCardDetail spec={} id_station={item.id_station} station_longname={item.station_longname} field={item.id_field.toString()} style={{flex:1/3}} />
  1. Comment je passe ceci dans spec=()
  2. et surtout, si je vais dans <StationCardDetail/>, comment je règle ma Props

Ceci ne m'affiche pas d'erreu, mais ca ne fonctionne pas

type Props = {
    style?: ViewStyle,
    id_station: number,
    station_longname: string,
    field: string,
    spec: []
}

C'est un peu compliqué tout cela, et j'espère que j'ai été assez compréhensible. Si vous pouviez me dire comment faire mieux, ca serait super top de votre part

Bonnes fêtes

1 réponse


J'oublie de préciser, dans mon @/hooks/useFetchQuery.js, j'ai ceci:
J'ai un sérieux doute concernant e contenu de measures?:{}
Mercii

'/getstation/[id]': {
        response: number, 
        id: number,
        method: string,
        next: string | null,
        stations?: {
            id_station: number,
            station_longname: string,
            id_station_type: number,
            station_type_name: string,
            station_archive: number,
            id_field: string,
            lat: string,
            lng: string,
            alt: number,
            measures?: {
                datasets?: {
                    data?:{

                    }[]
                }[],
                labels: string,
            }[],
            measures_found: number,
            station_found: number,
        }[],
        map_center:{

        }[],
    }