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

ES6对象构造嵌套参数的默认值

3 个答案: