Bonjour,

Je veux charger des données dans une table, j'ai plusieurs requêtes à lancer pour récupérer mes données.

Le chargement des données :

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
function MonComposant() {
 
  const [data, setData] = useState([]);   // données de la table des infonaut
  const [priorite, setPriorite] = useState([]);
  const [etude, setEtude] = useState([]);
  const [traitement, setTraitement] = useState([]);
 
  const [dataLoaded, setDataLoaded] = useState(false)
 
  useEffect(() => {
 
   Promise.all([
    fetch('http://localhost:3001/infonaut/get').then(resp => resp.json()).then(result => setData(result)),
    fetch('http://localhost:3001/infonaut-traitement/get').then(resp => resp.json()).then(result => setTraitement(result)),
    fetch('http://localhost:3001/infonaut-priorite/get').then(resp => resp.json()).then(result => setPriorite(result)),
    fetch('http://localhost:3001/etude/get').then(resp => resp.json()).then(result => setEtude(result)),
  ]).then(setDataLoaded(true))
 
  }, []);
Pour les données priorité, dans mes data, j'ai les valeurs 1, 2, 3,
la requête infonaut-priorite/get renvoie un tableau de la forme [{id:1, nom: priorite1}, {id:2, nom: priorite2}, {id:3, nom: priorite3}]

Ce que je voudrais, c'est que dans ma table, colonne priorité, soit affiché le nom, même si derrière dans les data, c'est l'id qui est stocké

Ensuite, je défini les colonnes de ma table :
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
const columns = useMemo(
    () => [
      .........
      {
        accessorKey: "priorite",
        header: "Priorité",
        filterVariant: 'select',
        filterSelectOptions: priorite.map(p => p.nom),
        editVariant: 'select',
        editSelectOptions: priorite.map(p => p.nom),
        muiEditTextFieldProps: {
          select: true,
          required: true,
          error: !!validationErrors?.priorite,
          helperText: validationErrors?.priorite,
        },
        Cell: ({ cell }) => priorite.filter(p => p.id === cell.getValue())[0].nom
      },
      ......
    ],
    [validationErrors, dataLoaded]
  );
donc je défini un masque d'affichage pour la cellule de la colonne 'priorité'

Mais au chargement, j'ai l'erreur :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
priorite.filter(...)[0] is undefined
Donc si je comprend, c'est que au moment où il définit les colonnes, il n'a pas fini de charger les données ?
il me semblait que l'instruction fetch permettait justement d'attendre la fin du traitement avant de passer à la suite...

Qu'est ce qui cloche?

Merci,

Nico