如何在動態對象內部的數組中添加/刪除

Question

我有這種結構的減速器：

{
  [key]: {
    answers: [
      { key: 1, mode: 'INCLUDE' }
    ],
    period: {},
  }
}

現在，我想將項目添加到Answers-array，但這不起作用（在reducer內部）。 因為那樣每次都將替換唯一的現有數組項。

return {
  ...state,
  [action.payload.serieId]: {
    ...state[action.payload.serieId],
    answers: [
      { ...action.payload.answerFilter },
    ],
  },
}

這也行不通，因為找不到屬性... state [action.payload.serieId] .answers。

return {
  ...state, [action.payload.serieId]: 
  {
    ...state[action.payload.serieId],
    answers: [ 
      ...state[action.payload.serieId].answers
      { ...action.payload.answerFilter },
    ],
  },
}

錯誤：

TypeError: Cannot convert undefined or null to object

有什么方法可以在reducer內部解決此問題，還是我必須在外部修改整個Array，然后在每次更改時簡單地將其完整設置？

“答案”是一個數組，因為其中可能有多個過濾器。

Answer 1

如果未在reducer狀態中找到serieId則需要應用默認值，因此在執行類似操作時應該很有用

const currentSerie = state[action.payload.serieId] || generateStateFromScratch();

那么你可以做類似的事情

return {
  ...state,
  [action.payload.serieId]: {
    ...currentSerie,
    ...{
      answers: [ ...currentSerie.answers, { ...action.payload.answerFilter } ]
    }
  }
}

所以您generateStateFromScratch函數應該看起來像這樣

const generateStateFromScratch = () => ({
    answers: [
      { key: 1, mode: 'INCLUDE' }
    ],
    period: {}
})

如果需要，可以將一個空的answers數組返回到初始狀態。