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

Posted 2023-02-22

【中文标题】JavaScript - 如何合并/附加到对象/数组 - ReactJS - 传播语法

【英文标题】：JavaScript - How to merge/append to an Object/Array - ReactJS - Spread Syntax

【发布时间】：2019-06-06 20:27:27

【问题描述】：

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

根据 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]

【问题讨论】：

在您的第一行中，您将数组括号 [] 与对象括号 混淆了。紧随其后的代码也完全关闭，因为您正在努力理解差异。让我重写一下。

【参考方案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]
 

【讨论】：

这是一个比接受的答案恕我直言的更清洁的解决方案。

【参考方案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 将是一个人员对象数组。

【讨论】：

最后一行代码中的小建议：如果我正确理解 OP 的意图，请将 ...NewPerson 替换为 NewPerson。

当然，我们可以这样做，但只是不想在数组中拥有原始对象的引用。

在 if (PreviousPersons === null) 应该是 CombinedPersons = [NewPerson] 我猜？

@ducmai 我的错。以为我也解决了这个问题。谢谢！

【参考方案3】：

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

你可以：

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

【参考方案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