React Reducer更新kanbanboard时旧值被覆盖 如何实现元素追加？

问题原因 #

你当前的REDUCER逻辑中，kanbanboard:[{...action.updates}] 是直接将kanbanboard字段赋值为仅包含新更新内容的数组，没有保留原有数组的历史数据，因此每次触发编辑操作都会覆盖旧值。

解决方案 #

现有ACTION函数无需修改，仅调整REDUCER的逻辑即可：先展开原有的kanbanboard数组保留历史数据，再将新更新的内容追加到数组末尾。修改后代码如下：

case "EDIT_EXPENSE":
  return state.map((expense) => {
    if (expense.id === action.id) {
      return {
        ...expense,
        // 先展开原有kanbanboard内容，再追加新内容，原有值不存在时默认是空数组
        kanbanboard: [...(expense.kanbanboard || []), {...action.updates}]
      };
    } else {
      return expense;
    };
  });

如果需要将新内容插入到数组开头，调换两个元素的顺序即可：kanbanboard: [{...action.updates}, ...(expense.kanbanboard || [])]

内容的提问来源于stack exchange，提问作者Maxxxus