Définition des colonnes d'une table après chargement des données
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:
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:
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:
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
