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

В этом случае вы, похоже, смешиваете массивы и объекты. Вы хотите, чтобы все свойства человека были изолированы от одной сущности. 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

Вам не нужно распространять новые свойства ...

Вы можете:

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