ES6對象構造嵌套參數的默認值

Question

我正在使用es6對象解構來為函數提供默認參數。

function mapStateToProps({ shops: { cakeShop: {}, pieShop: {} }) {
  return {
    CakeShopName: shops.cakeShop.Name,
    PieShopName: shops.pieShop.Name
  }
}

上面的問題是，如果我打電話

mapStateToProps({})

代碼拋出Cannot read property 'Name' of undefined 。 shops中的嵌套對象未設置為其默認值，並且代碼具有空引用。

如何確定shops內的嵌套對象被設置為正確的默認值，即使shops本身已定義？

Answer 1

聽起來像是在混淆默認值的混亂。 您的語法會破壞參數對象，但實際上並不會引入任何參數標識符。 您的功能范圍內沒有shops變量。

我假設你真的想介紹cakeShop和pieShop變量，並為它們提供默認值。 要做到這一點，你要寫

function mapStateToProps({ shops: { cakeShop = {}, pieShop = {} }) {
// short for             { shops: { cakeShop: cakeShop = {}, pieShop: pieShop = {} }) {
// parameter names (that will be bound):      ^^^^^^^^                ^^^^^^^
  return {
    CakeShopName: cakeShop.Name,
    PieShopName: pieShop.Name
  }
}

你也可以使用

function mapStateToProps({ shops: { cakeShop: {name: CakeShopName} = {}, pieShop: {name: PieShopName} = {} }) {
  return {CakeShopName, PieShopName};
}

Answer 2

要處理嵌套對象的默認值，它應該是

function mapStateToProps({ shops: { cakeShop = {}, pieShop = {} } = {} } = {}) {
...
}

Answer 3

我知道這個問題是關於解構的，但對於任何有興趣的人我都會在這里使用lodash或underscore留下另一個選項：

function mapStateToProps(shops) {
  _.defaultsDeep(shops, {
    cakeShop: {
      Name: "Kiki's CakeShop"
    }, 
    pieShop: {}
  })

  return {
    CakeShopName: shops.cakeShop.Name, // defaults to "Kiki's CakeShop"
    PieShopName: shops.pieShop.Name // undefined if not specified
  }
}