Question

我有一个具有这种结构的减速器：

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

现在，我想将项目添加到Answers数组中，但这不起作用（在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

是否有某种方法可以在化简器中解决此问题，还是必须在外部修改整个Array，然后在每次更改时简单地将其完整设置？

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

Answer 1

如果未发现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数组返回到初始状态。

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

1 个答案: