reactjs - 上下文是否与“复杂”对象兼容？

Question

我正在使用 React js 和上下文。我有一个如下所示的“复杂”对象，我想使用 Context 使其在子视图中可用：

{
  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>
    }
  ]

}

在 App.js 中，我正在为此设置状态：

this.setCarEntity = (carSelected, carsAvailable) => {
   console.info("[setCarEntity] Car selected: " + JSON.stringify(carSelected, null, 4));

   this.setState({
      carEntity: {
          carSelected: carSelected,
          carsAvailable: carsAvailable,
      }
   })
}

然后在 App 渲染中：

<CarEntityContext.Provider value={this.state.carEntity}>
   <CarEntityHome/>
</CarEntityContext.Provider>

在我看来很好。

在 CarEntityHome 中，我试图访问该对象。我可以访问主键的值，这是有效的：

 <CarEntityContext.Consumer>
     {valueCE => 
         (valueCE !== null && valueCE.carSelected !== null) &&
         <p> Car selected | id {valueCE.carSelected.carEntityId} / {valueCE.carSelected.mileage} km <br/>
        </p>
     }
</CarEntityContext.Consumer>

但是，我无法访问嵌入在“carSelected”对象中的对象： {valueCE.carSelected.carModel.carModelId} 这失败了，说： TypeError: Cannot read property 'carModelId' of undefined “carModel”子对象中的所有属性也是如此。

但是，如果我显示对象以检查它是否正确填充，实际上是这样：

<pre>{JSON.stringify(valueCE.carSelected, null, 2) }</pre>

给：

{
  "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
}

所以我在这里很困惑。我的对象已正确填充。但是在上下文中访问嵌入式/复杂对象是否有限制？我在这里遗漏了一些明显的东西吗？在官方文档中找不到答案，可能是一个错误？

提前感谢您的回答。

标签： reactjsreact-context