React Context: impossible d'accéder à un object "complexe"
Bonjour à tous,
J'utilise React et Context et j'ai un objet "complexe" comme ci dessous:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| {
carSelected:
{
"carEntityId": 6,
"mileage": 100000,
"immatriculationDate": "2020-05-01T00:00:00",
"vin": "VIN-cF95ew0cp0ZhxE=w",
"licencePlate": "GR-999-RT"
"carModel": {
"carModelId": 2,
"brand": "Fiat",
"model": "Tipo",
"motor": "1.7D",
...
}
}
carsAvailable: [
{
<list of car like car selected>
}
]
} |
Dans App.js, je l'initialise (à partir d'un retour API):
Code:
1
2
3
4
5
6
7
8
9
10
| this.setCarEntity = (carSelected, carsAvailable) => {
console.info("[setCarEntity] Car selected: " + JSON.stringify(carSelected, null, 4));
this.setState({
carEntity: {
carSelected: carSelected,
carsAvailable: carsAvailable,
}
})
} |
Ensuite dans le App.render():
Code:
1
2
3
| <CarEntityContext.Provider value={this.state.carEntity}>
<CarEntityHome/>
</CarEntityContext.Provider> |
A priori, je respecte bien la doc comme d'habitude...
Ensuite, je peut accéder aux clés / valeurs de premier "niveau" (pas dans l'objet encapsulé) comme ceci:
Code:
1
2
3
4
5
6
7
| <CarEntityContext.Consumer>
{valueCE =>
(valueCE !== null && valueCE.carSelected !== null) &&
<p> Car selected | id {valueCE.carSelected.carEntityId} / {valueCE.carSelected.mileage} km <br/>
</p>
}
</CarEntityContext.Consumer> |
Mais je n'arrive pas à accéder à l'objet encapsulé, ceci me semble correct mais plante:
Code:
{valueCE.carSelected.carModel.carModelId}
Réponse:
Citation:
TypeError: Cannot read property 'carModelId' of undefined
En fait, je ne peut accéder à aucun propriété de l'objet encapsulé...
Pourtant, cet objet est bien chargé:
Code:
<pre>{JSON.stringify(valueCE.carSelected, null, 2) }</pre>
Retourne:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| {
"carEntityId": 6,
"mileage": 100000,
"immatriculationDate": "2020-05-01T00:00:00",
"vin": "VIN-cF95ew0cp0ZhxE=w",
"licencePlate": "GR-999-RT",
"carModel": {
"carModelId": 2,
"brand": "Fiat",
"model": "Tipo",
"motor": "1.7D",
"horsePower": 57,
"kwPower": 40,
"fiscalPower": 4,
"energy": "petrol",
"finition": "Pop",
"maintenancePlan": null
},
"userDB": null
} |
Du coup je ne comprends pas...
Est-ce une limitation de l'API Context ?
Ai-je fait une erreur quelques part ?
Serait-ce un bug ?
Merci d'avance pour qui pourra m'éclairer :)
