正在更新嵌套数组中的对象，react redux

Question

我试图更新嵌套数组中的对象，下面是我的状态示例。我试图在目标内更新对象，我成功地更新了对象。

但是

每次我更新任何对象。索引0处的对象将获得所有对象的副本。我更新的次数越多，它就会创建更多的副本，它们就会嵌套在索引0处的对象中。

索引0处的对象也将使用任何对象的最新更新进行更新。

{
  list: {
    '0': {
      id: 0,
      dueDate: 'By May 28th I Will have: ',
      goals: [
        {
         0: {...}
         1: {...}
         3: {...}
        }
      ]
    }
   '1':{
      id: 0,
      dueDate: 'By June 31st I Will have: ',
      goals: [
        {
         2: {...}
         4: {...}
        }
}

keyName=列表中对象的索引。（位于“0”和“1”上方的两个值：{）

      return {
        ...state,
        [action.payload.keyName]: {
          ...state[action.payload.keyName],
          goals: [
            { ...state[action.payload.keyName].goals, ...action.payload.goal },
            ...state[action.payload.keyName].goals.slice(1, state[action.payload.keyName].goals.length)
          ]
        }
      };

此外，如果你知道任何好的留档或规范化的教程，请让我知道。

先谢谢你！：）

Answer 1

约翰看起来你以错误的方式描述了你的状态。首先，尝试使用数组分解目标更新您的目标：[{... state[keyName]。目标，...新目标}]也许这个可能会有用https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#updating-nested-objects

Answer 2

这将基于其键更新目标，假设目标具有唯一键。

const state = {  
    '0': {
      id: 0,
      dueDate: 'By May 28th I Will have: ',
      goals: [        
         {a: 1,
         b: 1,
         c: 1}
      ]
    },
   '1':{
      id: 0,
      dueDate: 'By June 31st I Will have: ',
      goals: [        
         {d: 1,
         r: 1}
      ]
   }
        
};

function reducer(state, keyName = 0, goal) {

 const goals = [...state[keyName].goals];
 const index = state[keyName].goals.findIndex((e) => Object.keys(e).every((key) => Object.keys(goal).includes(key)));
 goals.splice(index,1, goal);
 
 return {
  ...state,
  [keyName]: {
   ...state[keyName],
   goals, 
  }
 };
}

console.log(reducer(state, 0, {a:3, b:2, c:4}));