使用 ES6/React 解构简单的嵌套对象

Question

我有这个对象

const launch = {
    "flight_number": 102,
    "mission_name": "GPS SV05",
    "mission_id": []
    "rocket": {
        "rocket_id": "falcon9",
        "rocket_name": "Falcon 9",
        },
    "details": null,
    "upcoming": true,
    "static_fire_date_utc": null,
    "static_fire_date_unix": null,
    "timeline": null,
    "crew": null
}

如何从这个对象中获取 rocket_name？我试过这样解构

const {rocket: {rocket_name}} = launch

然后试图得到

{rocket_name}

在我的 JSX 中，但它返回了 TypeError: launch.rocket is undefined

const launch = {
  "flight_number": 102,
  "mission_name": "GPS SV05",
  "mission_id": []
  "rocket": {
    "rocket_id": "falcon9",
    "rocket_name": "Falcon 9",
  },
  "details": null,
  "upcoming": true,
  "static_fire_date_utc": null,
  "static_fire_date_unix": null,
  "timeline": null,
  "crew": null
}

const {
  rocket: {
    rocket_name
  }
} = launch

我尝试了很多不同的方法来解构它，甚至通过 launch.rocket.rocket_name

并且反应仍然 returns 同样的错误。

Answer 1

听起来您的一个或多个记录没有 rocket 属性集。您可以通过提供默认值来缓解这种情况，例如

const {rocket: {rocket_name} = {}} = launch

使用 ES6/React 解构简单的嵌套对象

Destructuring simple nested Object with ES6/React

javascript

object

destructuring

ecmascript-6

reactjs