React et TS récupérer objets depuis fetch

Version imprimable

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:

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

09/06/2022, 11h15
gwyohm

Hello, tu peux dire ce qui bloque ?
09/06/2022, 11h46
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:

1 2 'journaux' is assigned a value but never used.
Cordialement
09/06/2022, 13h31
gwyohm

jjournaux vs journaux ?

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:

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

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:

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:

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);
});
}

10/06/2022, 08h51
CoderInTheDark

Bonjour,

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