1
votes

JavaScript - Comment fusionner / ajouter à un objet / tableau - ReactJS - Syntaxe de propagation

J'ai du mal à ajouter quelque chose à mon objet en utilisant la syntaxe de diffusion.

En fonction du fait que NewPerson est là pour une occasion privée / professionnelle, je souhaite ajouter des clés / valeurs supplémentaires à l'objet / au tableau.

D'une manière ou d'une autre, cela ne fonctionne pas. J'espère que quelqu'un pourra m'aider. :(

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]
}

javascript reactjs spread-syntax

1 commentaires

Dans vos toutes premières lignes, vous confondez les crochets de tableau [] avec les accolades d'objet {} . Le code qui le suit est également complètement éteint puisque vous avez du mal à comprendre la différence. Laisse-moi réécrire ça.

4 Réponses :

0
votes

Vous n'avez pas besoin de diffuser les nouvelles propriétés ...

Vous pouvez:

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

0 commentaires

0
votes

Vous semblez mélanger des tableaux et des objets dans ce cas. Vous voulez que toutes les propriétés d'une personne soient isolées dans une seule entité. Object fonctionne mieux dans de tels cas.

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 sera un tableau d'objets personne.

4 commentaires

Suggestion mineure dans la dernière ligne de code: remplacez {... NewPerson} par simplement NewPerson si je comprends bien l'intention de OP.

Bien sûr, nous pourrions le faire, mais nous ne voulions tout simplement pas avoir la référence de l'objet d'origine dans le tableau.

dans le if (PreviousPersons === null) {il devrait être CombinedPersons = [NewPerson] je suppose?

@ducmai Mon mauvais. Je pensais que j'avais corrigé cela aussi. Merci !

0
votes

Une combinaison de toutes vos réponses a fait la version finale:

    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

0 commentaires

1
votes

Vous devriez utiliser des objets à la place de Array car les objets ont des paires clé-valeur. Vous pouvez faire (dans la syntaxe 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]
}

1 commentaires

Ceci est une solution plus propre que la réponse acceptée à mon humble avis.