javascript - 如何在动态对象内的数组中添加/删除

Question

我有一个具有以下结构的 reducer :

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

现在我想将项目添加到答案数组中，但这不起作用(在 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 内部解决此问题，或者我是否必须在外部修改整个数组，然后在每次更改时简单地对其进行整体设置？

“Answers”是一个数组，因为其中可能有多个过滤器。

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: {}
})

You can return an empty answers array into the initial state if needed.