Bonsoir,

mon composant parent ( une fiche avec des renseignements ) va requêter une BDD au montage ( avec componentDidMount )
Puis un composant enfant va générer un formulaire qui permet de modifier ces données et d'enregistrer les nouvelles données en BDD.

Je souhaiterais, lorsque je soumet le formulaire, faire un nouveau rendu du parent.
Je fais un callBack qui change le state du parent, mais il n'y a pas de nouvelle requête: le componentDidMount n'est pas apppelé !

Je pensait qu' automatiquement un nouveau rendu => appel de la fonction componentDidMount.

Voici mon composant parent:
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
import React from "react";
import {animal, tableList} from './datas'
import {init} from './utils'
import Modale from './Modale'
import { Form } from "./Form";
import HelloApp from "./HelloApp";
import { Population } from "./PopulationCard";
 
class AnimalCard extends React.Component
{ 
    constructor(props) {
        super(props)
        this.state = {
            ...init(animal), 
            visible: false,
            wantModify: false,
            wantDestruction: false, 
            destructionSuccess: false,
            showPopulation: false
        }
    }
 
    getAnimal = async () => {
        let form = {}
        const response = await fetch(this.props.animalId, {
            method: "GET",
        })
        .then( response => {if (response.ok) { return response.json() }} )
        .then( resp => {
            // all fields don't begin with '@' are values that i need
            // three case: a value (string), an array, or an object
            for (const key in resp) {
                if (key[0] !== "@") {
                    // treat array if key is ain tableList: datas for an other component
                    if (Array.isArray(resp[key]) && tableList.includes(key)) {
                        form[key] = resp[key]
                    // treat array
                    } else if (Array.isArray(resp[key])) {
                        let tab = []
                        for (const item of resp[key]) {
                            if (item['@id'] in tableList) {
                                // nerien faire
                            } else {
                                for (const itemKey in item) {
                                    if (itemKey[0]!== '@') {
                                        tab.push([item[itemKey], item["@id"]])
                                    }
                                }
                            }
                        }
                        form[key] = tab
                    // treat a value
                    } else if (typeof(resp[key]) === "string") {
                        form[key] = resp[key]
                    // else it's an object
                    } 
                    else {
                       for (const objectKey in resp[key]) {
                           const id =  resp[key]["@id"]
                           if (objectKey[0] !== '@') { 
                               form[key] = [resp[key][objectKey], id]
                           }
                       }
                    }
                }
            }
            return form
        }).then( form => {
            for (const key in form) {
                this.setState({
                    [key]: form[key]
                })
            }
        })
    }
 
    componentDidMount() {
        this.getAnimal()
    }
 
    hide = () => {
        this.setState({
            visible: false
        })
    }
 
    onClick = (ev) => {
        fetch('/checkUserConnexion')
        .then( response => response.json())
        .then( resp =>{
            if (resp) {
                if (ev.target.textContent === 'modifier') {
                    this.setState({
                        wantModify: true,
                    })
                }  else {
                    this.setState({
                        visible: true,
                        wantDestruction: true
                    })
                }
            } else {
                this.setState({
                    visible: true
                })
            }
        })
    }
 
    del = () => {
        fetch(this.props.animalId, {
            method: "DELETE"
        }).then( response => {
            if (response.ok) {
                this.setState({
                    destructionSuccess: true
                })
            }
        })
    }
 
    handleEdit = () => {
        this.setState({
            wantModify: false
        })
    }
 
    render() {
        return <div>
            {!this.state.wantModify && !this.state.destructionSuccess && !this.state.showPopulation && <div>
                <button type="button" className="btn btn-primary" onClick={this.onClick}>modifier</button>
                <button type="button" className="'btn btn-primary" onClick={this.onClick}>supprimer</button>
                <button type="button" className="'btn btn-primary" onClick={ () => this.setState({showPopulation: true})}>populations</button>
                <h1>{this.state.animalName}</h1>
                <p>Description:{this.state.description}</p>
                <div>espèce: {this.state.species[0]}</div>
                <div>régime: {this.state.diet[0]}</div>
                {this.state.continents && <div>continents: {this.state["continents"].map( c => <span key={c[1]}>{c[0]}</span>)}</div>}
                {!this.state.wantDestruction && <Modale visible={this.state.visible} hide={this.hide} animalId={this.props.animalId} context="change"/>}
                {this.state.wantDestruction && <Modale 
                                                visible={this.state.visible} 
                                                hide={this.hide} 
                                                animalId={this.props.animalId}
                                                context="destruction"
                                                del={this.del}/>
                                               }
            </div>}
            {this.state.wantModify && <Form context="edition" datas={this.state} id={this.props.animalId} field="animal" onEdit={this.handleEdit}/>}
            {this.state.showPopulation && <Population 
                                            id={this.props.animalId} 
                                            animalName={this.state.animalName}
                                            onDescription={() => this.setState({showPopulation: false})}
                                            onEdit={this.handleEdit}/>}
        </div> 
    }
}
 
export default AnimalCard

Du coup , lorsque je soumet le formulaire, le composant s'affiche , mais avec les anciennes données. La mise à jour n'est pas complète.
Il faut faire un componentDidUpdate ? quelle condition pour faire une nouvelle requête et récupérer les nouvelles données modifiées?

Merci,

Laurent.