I'm having trouble updating a nested object that is within a nested array using redux/react.
The data structure being displayed looks like this:
incidentEnforcementActions: [
{
eaId: 154,
incidentNumber: 1066,
eaCode: "WTTC",
enforcementActionStatusList: [
{
eaStatusId: 1,
eaId: 154
... more fields in here
},
{
eaStatusId: 2,
eaId: 154
... more fields in here
},
],
{
eaId: 155
incidentNumber: 1067,
eaCode: "FTC",
enforcementActionStatusList: [
{
eaStatusId: 3,
eaId: 155,
... more fields in here,
},
{
eaStatusId: 4,
eaId: 155,
... more fields in here
},
],
}]
In this case one of the nested objects needs to be edited, for example:
{
eaStatusId: 1,
eaId: 154
... more fields in here
}
The edited object gets sent to the server and its getting saved but then I get an error at the reducer level.
First, I tried this and got an error about mutating state:
//clone actions list
const cloneActionList = [...state.incidentEnforcementActions];
//find matching index
let getStatusIndex = cloneActionList.forEach((elem) => {
if (elem.eaId === action.payload.eaId) {
//loop through that items status list
let cloneStatus = [...elem.enforcementActionStatusList];
let statusIndex = cloneStatus.findIndex((stat) => stat.eaStatusId === action.payload.eaStatusId);
cloneStatus.splice(statusIndex, 0, action.payload);
elem.enforcementActionStatusList.splice(0, elem.enforcementActionStatusList.length, cloneStatus);
}
});
Then I read this post and the redux documentation and tried the code below. I think this would work but the issue is in the code below I'm referencing ids when I need to be referencing indexes. Not sure a clean way to do that.
return {
...state,
isSubmittingEnfAction: true,
incidentEnforcementActions: {
...state.incidentEnforcementActions,
[action.payload.eaId]:{
...state.incidentEnforcementActions[action.payload.eaId].enforcementActionStatusList,
[action.payload.eaStatusId] :
{
...state.incidentEnforcementActions[action.payload.eaId].enforcementActionStatusList[action.payload.eaStatusId],
enforcementActionStatusList: action.payload
}
}
}
}
UPDATE:
I've tried the following code based on this post, but it only returns the parent item:
let parentIndex = state.incidentEnforcementActions.findIndex(
(enfaction) => enfaction.eaId === action.payload.eaId
);
let childIndex = state.incidentEnforcementActions[parentIndex].enforcementActionStatusList.findIndex(
(status) => status.eaStatusId === action.payload.eaStatusId
);
...state,
incidentEnforcementActions: [
...state.incidentEnforcementActions.slice(0, parentIndex),
{
...state.incidentEnforcementActions[parentIndex],
enforcementActionStatusList: [
...state.incidentEnforcementActions[parentIndex].enforcementActionStatusList.slice(
childIndex, 1,
action.payload
)
]
}
],