Question

所以在我的React项目中，我有一个地址表单的回退默认状态，如下所示：

state = {
  newLocation: this.props.location || {
    lat: null,
    lng: null,
    street: null,
    complement: null,
    neighbourhood: null,
    city: null,
    state: null,
    zipCode: null,
    country: null,
  },
}

然而，定义这样一个大型对象并且所有键都等于null是非常荒谬的。有没有更短的方法这样做？ ES6 / ES7中的东西？

Answer 1

您可以使用数组并迭代键并使用Object.assign构建新对象。

var keys = ['lat', 'lng', 'street', 'complement', 'neighbourhood', 'city', 'state', 'zipCode', 'country'],
    loc = { lat: 123, lng: 246, city: 'NY', country: 'USA' },
    state = {
        newLocation: Object.assign(keys.reduce((o, k) => Object.assign(o, { [k]: null }), {}), loc)
    };

console.log(state);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

使用defaultProps方法

defaultProps可以定义为组件类本身的属性，以设置类的默认道具。这用于未定义的道具，但不用于空道具。例如：

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

使用等于null的每个键实例化对象的最佳方法？

2 个答案: