Discussion :

[Ushuango]

Bonjour,

j'ai un formulaire conçu avec React, qui va enregistrer en BDD des données pour une table
Et pour chaque table, je pourrais faire un formualire, mais est quasiment identique au premier, seul le nombre de composant dans le render différe et le name des ces composants.

voici mon formulaire:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
import React from "react";
import DataFieldSelect from "../Component/DataFieldSelect";
import DataFieldText from "../Component/DataFieldText";
 
const continentsValues =[]
const defaultState = {
    commonName: "",
    continents: [""],
    species: "",
    diets: "",
    dietsName: "",
    reset: false,
    formErrors: {
        dietsName: null,
        commonName: null,
        continents: null,
        species: null,
        diets: null
    }
}
 
class AnimalsPostDatas extends React.Component
{
    constructor(props) {
        super(props)
        this.state = {...defaultState,
            table: props.table,
        }
    }
 
    handleChange = (value, name) => {
        if (name == 'continents') {
            continentsValues.push(value)
            this.setState({
                [name]: continentsValues
            })
        } else {
            this.setState({
                [name]: value
            })
        }
    }
 
    insertAnimal = ev => {
        ev.preventDefault()
        // to get violations: violation on NotBlank if state don't exist
        for (const item in this.state) {
            if (this.state[item] == "" || this.state[item] == [""]) {
                delete this.state[item]
            }
        }
        console.log("les datas: ", this.state)
        fetch('/api/' + this.state.table, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/ld+json'
            },
            body: JSON.stringify(this.state)
        })
        .then( response => {
            if (response.ok) {
                console.log('pas d\'erreurs: ',response.status)
                return response.json()
            } else {
                console.log('des erreurs: ', response.status)
                return response.json()
            }
        })
        .then(resp => {
            if (resp.violations) {
                // get violations and change state of formErrors
                console.log('violations')
                let apiErrors = {}
                const {violations} = resp
                console.log(violations)
                violations.forEach( v => apiErrors[v.propertyPath] = v.message)
                this.setState({
                    formErrors: apiErrors
                })
                console.log(this.state.formErrors)
            } else {
                // reset state and change reset state ( toogle )
                this.setState(
                    {
                        commonName: "",
                        continents: [""],
                        species: "",
                        diets: "",
                        dietsName: "",
                        reset: !this.state.reset
                    }
                )
            }
        })
    }
 
    render() {
        return <div className="mx-auto">
                <form onSubmit={this.insertAnimal}>
                <h1>Enregistrer des données</h1>
                    <DataFieldText 
                        passData={this.handleChange} 
                        name="commonName" 
                        reset={this.state.reset}>
                        Nom commun
                    </DataFieldText>
                    <small className="align-self-end mb-2">{this.state.formErrors.commonName}</small>
                    <DataFieldSelect 
                        passData={this.handleChange} 
                        name="continents" 
                        multiple={true} 
                        reset={this.state.reset}>
                        Continent
                    </DataFieldSelect>
                    <small className="align-self-end mb-2">{this.state.formErrors.continents}</small>
                    <DataFieldSelect 
                        passData={this.handleChange} 
                        name="species" 
                        multiple={false} 
                        reset={this.state.reset}>
                        Espèce
                    </DataFieldSelect>
                    <small className="align-self-end mb-2">{this.state.formErrors.species}</small>
                    <DataFieldSelect 
                        passData={this.handleChange} 
                        name="diets" 
                        multiple={false} 
                        reset={this.state.reset}>
                        Régime alimentaire
                    </DataFieldSelect>
                    <small className="align-self-end mb-2">{this.state.formErrors.diets}</small>
                <button className="btn btn-primary w-100 mt-4" > Enregistrer l'animal</button>
            </form>
        </div>
    }
}
 
export default AnimalsPostDatas

Ici, il s'agit d'enregistrer un animal dans la table animals en BDD
Si je veux enregistrer une espèce en BDD, il n'y aura pas beaucoup de changements:
- je rajoute une clé dans le defaultState
- je ne met qu'un composant <DataFieldText /> avec une prop name différente.

Alors , puisque le reste ne change pas, je peux le réutiliser ! Mais comment ?
La fonction passData est un callBack pour récupérer les données qui serviront à la requête
La fonction insezrtANimal ne change pas non plus.

J'ai fait un copier/coller ( je sais , ce n'est pas bien ! ) dans un autre composant et tout fonctionne avec les petits changements décrits ci-dessus
Je ne voudrais pas faire de copier/coller

donc, comment faire des fonctions que je pourrai exporter ?
Merci d'avance,

Laurent.

[gwyohm]

Hello,

Je ne suis pas sur de comprendre ton souci, mais un callback, c'est une fonction comme une autre:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function logRes(res) {
  if (res.ok) {
    console.log('ok');
  } else {
    console.log('ko');
  }
  return res.json();
}
 
fetch('/api/truc').then(logRes)
fetch('/api/bidule').then(logRes)

si juste le nom de l'api change, tu peux aller jusqu'à faire une fonction qui te renvoie une fonction:

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
 
function logRes(res) {
  if (res.ok) {
    console.log('ok');
  } else {
    console.log('ko');
  }
  return res.json();
}
function getFetchFor(name) {
  return function() {
    return fetch(`/api/${name}`).then(logRes)
  }
}
const processTruc = getFetchFor('truc');
const processBisule = getFetchFor('bidule');
// ... plus loin
processTruc().then(res => console.log(res));

ca aide ?