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