JavaScript

Question

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

根据 NewPerson 是否在 private/professional 场合的事实，我想在 object/array 上附加额外的 key/values。

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

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

您不需要传播新属性...

您可以：

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

Answer 2

在这种情况下，您似乎混淆了数组和对象。您希望将一个人的所有属性隔离到一个实体中。 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 3

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

    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

Answer 4

您应该使用对象而不是数组，因为对象具有键值对。你可以这样做（在 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]
}

JavaScript - 如何 merge/append 到 Object/Array - ReactJS - 传播语法

JavaScript - How to merge/append to an Object/Array - ReactJS - Spread Syntax

reactjs

spread-syntax