JavaScript - 如何合并/附加到对象/数组 - ReactJS - 传播语法

Question

我在尝试使用扩展语法添加对象时遇到问题。

根据 NewPerson 是否在私人/专业场合存在这一事实，我想将额外的键/值附加到对象/数组。

不知何故它不起作用。 希望有人可以帮助我。 :(

 var NewPerson = [ Firstname: this.state.addPersonFirstname, Lastname: this.state.addPersonLastname, Birthday: this.state.addPersonBirthday, Occasion: this.state.addPersonOccasion, ]; if (this.state.addPersonOccasion === 'OccasionProfessional') { NewPerson = [ ...NewPerson, ...[ProfEmployerName: this.state.addPersonOccasionProfEmployerName], ...[ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ], ...[ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity], ...[ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT] ] } if (this.state.addPersonOccasion === 'OccasionPrivate') { NewPerson = [ ...NewPerson, ...[PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet], ...[PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ], ...[PrivPersonCity: this.state.addPersonOccasionPrivPersonCity] ] } var CombinedPersons if (PreviousPersons === null) { CombinedPersons = NewPerson } else { CombinedPersons = [...PreviousPersons, ...NewPerson] }

Answer 1

您应该使用对象而不是数组，因为对象具有键值对。 你可以这样做（在 ES6 语法中）：

const { addPersonOccasion } = this.state;

const isProfessional = addPersonOccasion === 'OccasionProfessional';
const isPrivate = addPersonOccasion === 'OccasionPrivate';

const NewPerson = {
    Firstname: this.state.addPersonFirstname,
    Lastname: this.state.addPersonLastname,
    Birthday: this.state.addPersonBirthday,
    Occasion: this.state.addPersonOccasion,
    ...(isProfessional && {
      ProfEmployerName: this.state.addPersonOccasionProfEmployerName,
      ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ,
      ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity,
      ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT
    }),
    ...(isPrivate && {
        PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet,
        PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ,
        PrivPersonCity: this.state.addPersonOccasionPrivPersonCity
    })
};


let CombinedPersons = [NewPerson];


if (PreviousPersons !== null) {
  CombinedPersons = [...PreviousPersons, ...CombinedPersons]
} 

Answer 2

你不需要传播新的属性......

你可以：

if (this.state.addPersonOccasion === 'OccasionProfessional') {
    NewPerson = {
        ...NewPerson,
        ProfEmployerName: this.state.addPersonOccasionProfEmployerName,
        ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ,
        //... and so on
    }
}

Answer 3

在这种情况下，您似乎混淆了数组和对象。 您希望将一个人的所有属性与单个实体隔离开来。 在这种情况下， Object效果最好。

 var NewPerson = { Firstname: this.state.addPersonFirstname, Lastname: this.state.addPersonLastname, Birthday: this.state.addPersonBirthday, Occasion: this.state.addPersonOccasion, }; if (this.state.addPersonOccasion === 'OccasionProfessional') { NewPerson = { ...NewPerson, ProfEmployerName: this.state.addPersonOccasionProfEmployerName, ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ, ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity, ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT } } if (this.state.addPersonOccasion === 'OccasionPrivate') { NewPerson = { ...NewPerson, PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet, PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ, PrivPersonCity: this.state.addPersonOccasionPrivPersonCity ] } var CombinedPersons if (PreviousPersons === null) { CombinedPersons = [NewPerson] } else { CombinedPersons = [...PreviousPersons, {...NewPerson}] }

PreviousPersons将是一组人员对象。

Answer 4

您所有答案的组合构成了最终版本：

 var NewPerson = { Firstname: this.state.addPersonFirstname, Lastname: this.state.addPersonLastname, Birthday: this.state.addPersonBirthday, SigImage: this.sigPad.getCanvas().toDataURL('image/png'), Occasion: this.state.addPersonOccasion, }; if (this.state.addPersonOccasion === 'OccasionProfessional') { NewPerson = { ...NewPerson, ProfEmployerName: this.state.addPersonOccasionProfEmployerName, ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ, ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity, ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT } } if (this.state.addPersonOccasion === 'OccasionPrivate') { NewPerson = { ...NewPerson, PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet, PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ, PrivPersonCity: this.state.addPersonOccasionPrivPersonCity } } // Save the user input to NewPerson var - End // Create combined var with PreviousPersons and NewPerson - Start var CombinedPersons if (PreviousPersons === null) { CombinedPersons = [NewPerson] } else { CombinedPersons = [ ...PreviousPersons, NewPerson ] } // Create combined var with PreviousPersons and NewPerson - End