Javascript 减少道具的数量

我有一个组件，用户可以从中路由到表单。有两个选项：创建新表单或编辑旧表单。我将所有带有链接位置的数据发送到该表单组件。但因为我有8个以上的字段，所以验证位置状态是否存在或是否没有位置状态变得很麻烦，请使用默认值

目前我有这样的想法：

this.state = {
  firstName: this.props.location.state !== undefined ?
    this.props.location.state.userProfile.firstName : '',
  familyName: this.props.location.state !== undefined ?
    this.props.location.state.userProfile.familyName : '',
  address: this.props.location.state !== undefined ?
    this.props.location.state.userProfile.address : 'Enter your address',
  city: this.props.location.state !== undefined ?
    this.props.location.state.userProfile.city : 'Select your city',
  country: this.props.location.state !== undefined ?
    this.props.location.state.userProfile.country : 'Select your country',
  field: this.props.location.state !== undefined ?
    this.props.location.state.userProfile.field : '',
  message: this.props.location.state !== undefined ? 'Save my changes' : 'Create'
}

这是这样接收的：

<Link to={{
  pathname: '/register/create', state: {
    userProfile: item <--comes from mapping
  }
}}>

---

至少有一个可以简化的点：在
位置。状态
存储一个对象，可以直接从该对象填充本地状态：


this.state=this.props.location.state
? this.props.location.state.userProfile
: {
名字“”，
familyName:“”，
地址：'输入您的地址'，
城市：“选择您的城市”，
国家：'选择您的国家'，
字段：“”，
};
至少有一个可以简化的点：在
位置。状态
存储一个对象，可以直接从该对象填充本地状态：


this.state=this.props.location.state
? this.props.location.state.userProfile
: {
名字“”，
familyName:“”，
地址：'输入您的地址'，
城市：“选择您的城市”，
国家：'选择您的国家'，
字段：“”，
};选择你的城市不应该在你的州。最好将其留空，并将其作为{state.city | |“select your city”}传递给表单

JS:

JSX（视图）：

城市：{state.City | |“选择你的城市”}

消息：{state.Message | |'Create'}

选择您的城市”不应在您所在的州。最好将其留空，并将其作为{state.city | |“select your city”}传递给表单

JS:

JSX（视图）：

城市：{state.City | |“选择你的城市”}

消息：{state.Message | |'Create'}

对于任何数据，我宁愿解构对象并使用默认对象

// this could be even outside of your class.
const defaultObj = {
  firstName: '',
  familyName: '',
  address: 'Enter your address',
  city: 'Select your city',
  country: 'Select your country',
  field: '',
}

/* the constructor*/

constructor(){
    const { userProfile = {} } = this.props.location.state || {};

    this.state = {
      ...defaultObj
      ...userProfile
    }
}

我宁愿解构对象，在任何数据的情况下使用默认对象

// this could be even outside of your class.
const defaultObj = {
  firstName: '',
  familyName: '',
  address: 'Enter your address',
  city: 'Select your city',
  country: 'Select your country',
  field: '',
}

/* the constructor*/

constructor(){
    const { userProfile = {} } = this.props.location.state || {};

    this.state = {
      ...defaultObj
      ...userProfile
    }
}

简化长状态的好方法简化长状态的好方法不用担心@Kertix我喜欢编写干净可读的代码hahano担心@Kertix我喜欢编写干净可读的代码哈哈
// this could be even outside of your class.
const defaultObj = {
  firstName: '',
  familyName: '',
  address: 'Enter your address',
  city: 'Select your city',
  country: 'Select your country',
  field: '',
}

/* the constructor*/

constructor(){
    const { userProfile = {} } = this.props.location.state || {};

    this.state = {
      ...defaultObj
      ...userProfile
    }
}