Discussion :

[CoderInTheDark]

Bonjour,

Je débute en React comme je viens de Java j'ai préféré TypeScript.

Je suis toujours un peu perdu par les différences

Je souhaite récupérer avec fetch mes objets en JSON depuis un services web

J'ai écrit le code suivant.
J'ai aussi un fichier pour mon model
Mais il y a un truc qui bloque et je suis perdu

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
19
20
21
22
23
24
25
26
 
...
import React, { FunctionComponent, useEffect, useState } from 'react';
 
      const App: FunctionComponent = () => {
     //* const [journaux, setName] = useState('');
     const [journaux, setJournaux] = useState<Journal[]>([]);
 
     useEffect(() => {
        fetch('http://localhost:8080/journal/getAll').then(function (response) {
         return response.text();
      }).then(function (texte) {
      return JSON.parse(texte);
}).then(
         journaux => setJournaux(journaux));
      })
 
     return (
         <div>
 
            Il y a [jjournaux.length] dans la base.
                                                                             <h1>Liste des journaux</h1>
                                                                             </div>
       );
     }
      export default App;

Si vous avez une idée merci par avance

Cordialement

[gwyohm]

Hello, tu peux dire ce qui bloque ?

[CoderInTheDark]

Bonjour,

Le problème est que "jjournaux.length" affiche 0.

Comme si l'affectation dans le fetch avec la valeur retournée par le web service n'avait pas affecté.

Le service est en Spring et marche

De plus j'ai un avertissement qui m'inquièete

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
'journaux' is assigned a value but never used.

Cordialement

[gwyohm]

jjournaux vs journaux ?

[CoderInTheDark]

Bien vu et y avait aussi des crochets à la place des accolades dans le jsx

Je suis pas encore bienhabitué à travailler avec VS code et type scripte
J'identifie mieux les erreurs avec Eclipse et Java
C''est un coup à prendre

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
19
20
21
22
23
24
25
26
27
28
29
30
31
 
import Journal from './models/Journal';
 
import React, { FunctionComponent, useEffect, useState } from 'react';
 
const App: FunctionComponent = () => {
   //* const [journaux, setName] = useState('');
   const [journaux, setJournaux] = useState<Journal[]>([]);
 
   useEffect(() => {
      fetch('http://localhost:8080/journal/getAll').then(function (response) {
         return response.text();
      }).then(function (texte) {
         return JSON.parse(texte);
      }).then(
         journaux => setJournaux(journaux));
   })
 
   return (
      <div>
         <h1>Liste des journaux</h1>
         Il y a {journaux.length} journaux dans la base.
 
         <ol> {
            journaux.map((journal) =>
               <li>{journal.code} - {journal.libelle}</li>
            )}                              </ol>
      </div>
   );
}
export default App;

Comment je peux sortir proprement le fetch en TS?

Je fais une fonction qui retourne un tableau ou le JSON et un tableau vide en cas d'erreurs ?

Je peux sortir après le code jsx

[gwyohm]

alors je sais pas trop ce que tu entends par sortir proprement le fetch en ts.

Mais si ta question c'est comment isoler, tu peux faire une fonction useJournaux (pas testé):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// useJournaux.ts
export default function useJournaux(): ReturnType<typeof useState<Journal[]>> {
  const [journaux, setJournaux] = useState<Journal[]>([]);
  useEffect(() => {
     fetch('http://localhost:8080/journal/getAll').then(function (response) {
        return response.text();
     }).then(function (texte) {
        return JSON.parse(texte);
     }).then(
        journaux => setJournaux(journaux));
  });
  return [journaux, setJournaux];
}

Si la question c'est comment obtenir un type après le fetch, pareil pas testé, mais un truc comme ca

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
export default async function useJournaux(): ReturnType<typeof useState<Journal[]>> {
  const response = await fetch('http://localhost:8080/journal/getAll');
  type JSONResponse = {
    data: Journal[]
  };
  const { data }: JSONResponse = await response.json();
  setJournaux(response.data);
});
}

[CoderInTheDark]

Merci pour tes réponses.

En f ait je pensais faire une fonction un DAO, qui retournerait les objets(gettAll, get, delettte,...).
Mais sans que cette dernière intervienne sur le state.
Sauf que pour l'instant le seul but que je vois de récupérer mes données via les services est de les stocker dans un state.

Comme je débute en front JavaScript je suis un peu perdu.
J'ai pris l'option TypeScript, car je suis habitué au typage fort, qui me sécurise

Car là c'est encore du bricolage je ne peux pas laisser le fetch dans App, sinon ça va vite devenir le boxon.

Cordialement