Discussion :

[Ushuango]

Bonjour,

je fais un formulaire en react et je n'arrive pas à afficher les options d'un champ select,
les options étant récupérées dans une table de ma BDD
il s'agit d'un composant de l'application qui retourne un formulaire.
je pense que je ne m'y prends pas comme il faut!

Code javascript :

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
const Field = ({name, place, type, table}) => {
 
        let inputField =""
        switch (type) {
            case "text":
                inputField = <input type={type} placeholder={place} id={name}/>
                break
            case "select":
                const options = fetchOptions(table)
                inputField = <select>
                    {options.map( op => <option key={op[0]} value={op[0]}>{op[1]}</option>)}
                </select>
                break
        }
 
        return <div className="form-group">
            <label htmlFor={name} className="me-2">{name}</label>
            {inputField}
        </div>
    }
 
    return <form className="mt-4">
            <Field type="text" name="Nom" place="Ex: Lion"/>
            <Field type="select" name="Espèce" table="species"/>
            <Field type="select" name="Régime" table="diets"/>
        </form>

Les options sont un tableau de tableaux, mais je pense que la ligne {options.map( op => <option key={op[0]} value={op[0]}>{op[1]}</option>)}
n'est pas bonne, mais je ne vois pas ce qui cloche...
Pour l'instant, ça m'affiche bien mon input de type texte, mais pour les selects, j'ai le label et une sélection avec 0 option

Il y a bien les useState et useEffect, mais je ne vois pas comment m'en servir dans mon cas...
Si quelqu'un connait la bonne façon d'obtenir le formulaire que je souhaite, merci d'avance !

Laurent.

[Ushuango]

J'ai essayer quelque chose de plus correct ( je pense ), mais toujours le même problème

Code javascript :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
import React, { useState } from "react";
 
export default function () {
 
    const [nom, setNom] = useState()
    const [diet, setDiet] = useState()
    const [species, setSpecies] = useState()
    const [continent, setContinent] = useState()
 
    const fetchOptions = (table) => {
        let datas = []
        fetch('api/' + table)
        .then( response => { if ( response.ok) {return response.json()} else {console.log('une erreur')} })
        .then( data =>  {
            for (const item of data["hydra:member"]) {
                if (table === "diets") {
                    table = table.slice(0, -1)
                }
                datas.push([item["@id"], item[table + "Name"]])
            }
        })
        return datas
    }
 
    const Select = ({table}) => {
        const options = fetchOptions(table)
        return <select>
            {options.map( op => <option value={op[0]}>{op[1]}</option>)}
        </select>
 
    }
 
    return (
        <form>
            <div className="form-group">
                <label htmlFor="nom">Nom</label>
                <input type="text" id="nom" placeholder="Ex: Lion" />
            </div>
            <div className="form-group">
                <label htmlFor="diets">Régime</label>
                <Select table="diets" />
            </div>
            <div className="form-group">
                <label htmlFor="species">Espèces</label>
                <Select table="species" />
            </div>
        </form>
    )
}

Je ne comprends pas du tout...!

[Ushuango]

Ça fonctionne bien (pour le deuxième code) lorsque je rentre manuellement les options dans la variable options

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const Select = ({table}) => {
        const options = [
            ["1", "carnivore"],
            ["2", "herbivores"],
            ["3", "omnivores"]
        ]
        console.log('les options: ', options)
        return (
            <select>
                {options.map( op => { return (<option key={op[0]} value={op[0]}>{op[1]}</option>) }) }
            </select>
        )
    }

Pourtant, le console.log affiche mes options , même si elles proviennent de la BDD !
Il n'y aurait pas une histoire de fonction asynchrone ? je m'y prendrais pas correctement dans fetchOptions()

[NoSmoking]

Bonjour,

Il n'y aurait pas une histoire de fonction asynchrone ?

tu as visiblement le même souci que dans cette discussion : Retour d'une réponse avec fetch ....

Je t'engage donc à regarder la documentation à ce sujet :

↪ React : AJAX et les API

[Ushuango]

J'avais commencé à corriger dans ce sens ( et vu le post en question ), juste oublié le [] en deuxième paramètre du useEffect

Merci !