NGRX store存储的Referential数组删除元素后保存出现空行如何解决

问题原因 #

1. 现有保存逻辑的缺陷：你当前是基于Store中旧的values数组长度做遍历映射，就算表单已经删除了某一行，旧数组的长度仍然大于删除后的表单数组长度，遍历到表单不存在的下标时，所有属性取到的都是undefined，存入Store后就会变成全空的行。
2. 你尝试的删除逻辑错误：splice方法会直接修改原数组，且返回值是被删除的元素组成的数组，你用对象展开运算符将其赋值给values数组，类型完全不匹配，因此会报错。同时NGRX要求数据不可变更新，直接修改从Store取出的引用对象本身也不符合规范。

正确实现方案 #

方案1：修改保存逻辑（推荐，从根源解决空行问题）

不需要基于旧的Store数组做映射，直接取删除后的表单有效值构造新数组即可：

// 先取表单中删除行后的最新数据，过滤掉无效空行
const validFormRows = this.form.controls.referentials.value.referentials
  .filter((row: Partial<ReferentialData>) => row?.libelle && row?.value);

// 直接用有效的表单数据构造新的values数组
const values: Array<ReferentialData> = validFormRows.map(row => ({
  libelle: row.libelle,
  value: row.value,
  primaryColor: row.primaryColor,
  secondaryColor: row.secondaryColor,
  borderColor: row.borderColor
}));

// 分发action更新Store
this.store.dispatch(
  SettingsActions.updateReferentials({
    referential: { ...referentials, values }
  })
);

方案2：删除行时同步处理数据的正确写法

如果需要在删除行的节点就更新临时数据，使用filter生成全新数组，符合不可变原则：

// 过滤掉对应下标的元素，返回全新数组，不会修改原数组
this.referentials[0].values = this.referentials[0].values.filter((_, idx) => idx !== index);

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