Discussion :

[bjbtiben]

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

[gwyohm]

salut,

t'es pas dans un problème d'asynchronisme ? tu charges bien l'objet en complet du début, ou tu merge plusieurs objets en un seul ?
Ce qui pourrait arriver c'est qu'en récupérant une Car avec un modelId, tu le rende accessible via le provider, puis que tu merge depuis un model (via un modelId)
Mais que Car est disponible avant d'être merged avec Model... du coup ton code plante pcq au moment ou il essaye de recuperer le model, il n'est pas encore fusionné avec le model.