[英]Loop through Array of Objects and append the Object to an Array if it doesn't exist
[英]Loop through an array of objects to update object values and append additional objects
我有一个包含对象的fields数组,并且试图循环该数组:
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,
},
];
要更新其值并附加其他对象:
传入值 :
"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': { ... }
];
关于如何更新值并将其他对象附加到我的字段数组的任何想法? field
对象中的字符串值的callTimes
数组是动态的(可以包含1个或多个字符串),因此我无法进行任何硬编码。
const 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, }, ]; const fieldValues = { "callTimes": [ "5:45 pm", "6:15 pm", "6:30 pm", "7:00 pm" ], "selectedSeasonId": "20192020", "seasonIds": [ "20192020", "20202021", "20212022", ] }; const updateField = (currentField, event) => { 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)); console.log(updatedFields);
使用reduce
而不是map
,我相信我得到了正确的输出:
const updateField = (result, currentField) => {
switch (currentField.name) {
case 'seasonId':
return [
...result,
{
...currentField,
selectOptions: fieldValues.seasonIds,
value: fieldValues.selectedSeasonId,
disabled: false
}
]
case 'callTime':
const callTimes = fieldValues.callTimes.map(...);
return [
...result,
...callTimes
]
}
}
const updatedFields = fields.reduce(updateField, [])
由于您的callTime
案例正在返回数组中的多个对象,因此map
在这种情况下无法正常工作,因为您需要将这些对象分别推入/添加到“最终”数组中,因此此return
:
case 'callTime':
const callTimes = fieldValues.callTimes.map(...);
return [
...result,
...callTimes
]
另外,您的callTimes
出来是一个数组,并且您尝试将其项分散到一个对象中:
case "callTime":
const callTimes = fieldValues.callTimes.map(...); // array
return {
...callTimes
};
这就是为什么您得到意外/奇怪的结果的原因。
这是修复的演示:
由于您已在注释中询问了如何将fieldValues
从另一个文件导入,因此如何将fieldValues
传递给reducer函数,因此您可以执行以下操作:
const updateField = (result, currentField, fieldValues) => {...}
const updatedFields = fields.reduce(
(result, field) => updateField(result, field, fieldValues),
[]
)
其他一切保持不变。
这是另一个演示:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.