[英]Loop through an array of objects to update object values and append additional objects
I have a fields array with objects and I'm trying to loop this array: 我有一个包含对象的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,
},
];
To update its values AND append additional objects: 要更新其值并附加其他对象:
Incoming values : 传入值 :
"fieldValues": {
"callTimes": [
"5:45 pm",
"6:15 pm",
"6:30 pm",
"7:00 pm"
],
"selectedSeasonId": "20192020",
"seasonIds": [
"20192020",
"20202021",
"20212022",
]
}
Update field function : 更新字段功能 :
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
};
}
}
And then invoke the function above like so: 然后像上面这样调用上面的函数:
const updatedFields = fields.map(field => updateField(field, event));
However, I'm not getting the desired result. 但是,我没有得到期望的结果。
Actual output : 实际输出 :
[
'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': { ... }
}
];
Expected output : 预期产量 :
[
'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': { ... }
];
Any ideas on how I can update values and append additional objects to my fields array? 关于如何更新值并将其他对象附加到我的字段数组的任何想法? The
callTimes
array of string values within the field
object is dynamic (can contain 1 string or many), so I can't hard code anything. 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);
Using reduce
instead of map
, I believe I am getting the right output: 使用
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, [])
Since your callTime
case was returning multiple objects in an array, map
wouldn't work well in this case as you need to push/add these objects individually to the "final" array, hence this return
: 由于您的
callTime
案例正在返回数组中的多个对象,因此map
在这种情况下无法正常工作,因为您需要将这些对象分别推入/添加到“最终”数组中,因此此return
:
case 'callTime':
const callTimes = fieldValues.callTimes.map(...);
return [
...result,
...callTimes
]
Also, your callTimes
came out to be an array, and you tried to spread its items into an object: 另外,您的
callTimes
出来是一个数组,并且您尝试将其项分散到一个对象中:
case "callTime":
const callTimes = fieldValues.callTimes.map(...); // array
return {
...callTimes
};
This is why you were getting an unexpected/weird outcome. 这就是为什么您得到意外/奇怪的结果的原因。
Here's a demo with the fix: 这是修复的演示:
Since you asked in the comments how to pass fieldValues
to the reducer function since they are being imported from another file, you can do the following: 由于您已在注释中询问了如何将
fieldValues
从另一个文件导入,因此如何将fieldValues
传递给reducer函数,因此您可以执行以下操作:
const updateField = (result, currentField, fieldValues) => {...}
const updatedFields = fields.reduce(
(result, field) => updateField(result, field, fieldValues),
[]
)
Everything else stays the same. 其他一切保持不变。
Here's another demo: 这是另一个演示:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.