Bonjour à tous,

J'utilise React et Context et j'ai un objet "complexe" comme ci dessous:

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
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
{valueCE.carSelected.carModel.carModelId}
Réponse:
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
<pre>{JSON.stringify(valueCE.carSelected, null, 2) }</pre>

Retourne:
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
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