Javascript 循环遍历对象数组以更新对象值并附加其他对象

我有一个包含对象的字段数组，我正在尝试循环此数组：

fields: [
    {
        name: "seasonId",
        type: "select",
        label: "Season ID",
        placeholder: "Select a season id...",
        icon: "id",
        value: "",
        errors: "",
        required: true,
        disabled: true,
        selectOptions: [],
    },
    {
        name: "callTime",
        type: "time",
        label: "Scheduling Call Times",
        placeholder: "Select a time...",
        value: "",
        errors: "",
        required: true,
        disabled: true,
    },
];

要更新其值并附加其他对象，请执行以下操作：

传入值：

更新字段功能：

然而，我没有得到想要的结果

实际产量：

预期产出：

关于如何更新值并将其他对象附加到字段数组中，有什么想法吗？field对象中字符串值的callTimes数组是动态的，可以包含1个或多个字符串，因此我无法硬编码任何内容

常量字段=[ { 姓名:季节性， 类型：选择， 标签：季节ID， 占位符：选择一个季节id。。。， 图标：id， 值：， 错误：， 要求：正确， 残疾人:对,， 选择选项：[]， }, { 姓名：callTime， 类型：时间， 标签：安排通话时间， 占位符：选择一个时间。。。， 值：， 错误：， 要求：正确， 残疾人:对,， }, ]; 常量字段值={ 通话时间：[ 下午五时四十五分， 下午六时十五分， 下午六时三十分， 下午7:00 ], 选择的季节ID:20192020， 季节标识：[ 20192020, 20202021, 20212022, ] }; 常数updateField=currentField，事件=>{ switchcurrentField.name{ 案件编号： 返回{ …当前字段， 选择选项：fieldValues.seasureids， 值：fieldValues.selectedSeasonId， 禁用：false }; 案例调用时间： const callTimes=fieldValues.callTimes.mapvalue，key=>{ …当前字段， name:key使用reduce而不是map，我相信我得到了正确的输出：

const updateField=result，currentField=>{ 开关currentField.name{ “季节ID”案例： 返回[ 后果 { …当前字段， 选择选项：fieldValues.seasureids， 值：fieldValues.selectedSeasonId， 禁用：false } ] 案例“通话时间”： const callTimes=fieldValues.callTimes.map。。。； 返回[ 后果 …通话时间 ] } } const updatedFields=fields.reduceupdateField，[] 由于您的callTime案例在一个数组中返回多个对象，因此map在这种情况下无法正常工作，因为您需要将这些对象单独推送/添加到最终数组中，因此此返回：

案例“通话时间”： const callTimes=fieldValues.callTimes.map。。。； 返回[ 后果 …通话时间 ] 此外，您的callTimes是一个数组，您试图将其项分散到一个对象中：

案例调用时间： const callTimes=fieldValues.callTimes.map…；//数组 返回{ …通话时间 }; 这就是为什么你会得到一个意想不到/奇怪的结果

以下是修复程序的演示：

由于您在注释中询问了如何将字段值传递给reducer函数，因为它们是从另一个文件导入的，因此您可以执行以下操作：

const updateField=result，currentField，fieldValues=>{…} const updatedFields=fields.reduce 结果，字段=>updateFieldresult，字段，字段值， [] 其他一切都保持不变

下面是另一个演示：

"fieldValues": {
  "callTimes": [
    "5:45 pm",
    "6:15 pm",
    "6:30 pm",
    "7:00 pm"
  ],
  "selectedSeasonId": "20192020",
  "seasonIds": [
    "20192020",
    "20202021",
    "20212022",
  ]
}

const updateField = (currentField, fieldValues) => {
  switch(currentField.name) {
    case "seasonId":
      return {
        ...currentField,
        selectOptions: fieldValues.seasonIds,
        value: fieldValues.selectedSeasonId,
        disabled: false
      };
    case "callTime":
      const callTimes = fieldValues.callTimes.map((value, key) => ({
        ...currentField,
        name: key <= 0 ? "callTime" : `callTime-${Date.now()}`,
        label: key <= 0 ? "Scheduling Call Times" : "",
        value,
        required: key <= 0,
        disabled: false,
      }));

      return { 
        ...callTimes 
      };
  }
}

const updatedFields = fields.map(field => updateField(field, event));

[
  '0': {
    disabled: false
    errors: ""
    icon: "id"
    label: "Season ID"
    name: "seasonId"
    placeholder: "Select a season id..."
    required: true
    selectOptions: ["20192020", "20202021", "20212022"]
    type: "select"
    value: "20192020"
  },
  '1': {
         '0': {  
           disabled: false
           errors: ""
           label: "Scheduling Call Times"
           name: "callTime"
           placeholder: "Select a call time..."
           required: true
           style: {width: "100%"}
           type: "time"
           value: "5:45 pm"
         },
         '1': {
           disabled: false
           errors: ""
           label: ""
           name: "callTime-1565388886669"
           placeholder: "Select a call time..."
           required: false
           style: {width: "100%"}
           type: "time"
           value: "6:15 pm"
         },
         '3': { ... },
         '4': { ... }
      }
];

[
  '0': {
    disabled: false
    errors: ""
    icon: "id"
    label: "Season ID"
    name: "seasonId"
    placeholder: "Select a season id..."
    required: true
    selectOptions: ["20192020", "20202021", "20212022"]
    type: "select"
    value: "20192020"
  },
  '1': {
    disabled: false
    errors: ""
    label: "Scheduling Call Times"
    name: "callTime"
    placeholder: "Select a call time..."
    required: true
    style: {width: "100%"}
    type: "time"
    value: "5:45 pm"
  },
  '2': {
     disabled: false
     errors: ""
     label: ""
     name: "callTime-1565388886669"
     placeholder: "Select a call time..."
     required: false
     style: {width: "100%"}
     type: "time"
     value: "6:15 pm"
  },
  '3': { ... },
  '4': { ... }
];