NgRx中dispatch AddItem提交FormData报类型不匹配错误如何解决

报错来自两个不匹配问题：

1. JS对象简写语法写错：{this.formData}不是合法的对象简写写法，ES6对象简写要求属性名和变量名完全一致，你这种写法会被解析为{ this: this.formData }，正好对应报错里提示的{ this: any }类型，和action要求的参数结构完全不符。
2. Action参数结构、类型不匹配：你定义的AddItem action明确要求入参是{ item: Item }结构，既要属性名是item，还要传入的值符合Item类型约束，你当前写法既没写对属性名，传入的FormData也没和Item类型对齐。

1. 优先修正传参结构 #

按照action定义的要求，传参必须包含item属性，不能直接把formData扔在对象里。
另外注意：不要把formData声明为组件类属性，每次提交时新建实例，避免多次提交残留旧数据。

2. 根据你的业务场景选择类型对齐方案 #

场景A：后端要求直接接收FormData，effect里直接拿payload发请求 #

直接调整类型定义，不要用类型强转：
如果action的payload就是要传FormData，直接修改action定义：

export const AddItem = createAction(
  ItemActionsNames.AddItems,
  props<{ item: FormData }>()
);

然后修正提交方法：

onSubmit() {
  const formData = new FormData();
  formData.set('name', this.userForm.get('name')?.value);
  formData.set('description', this.userForm.get('description')?.value);
  formData.set('price', this.userForm.get('price')?.value);
  formData.set('category', this.userForm.get('category')?.value);
  formData.set('available', this.userForm.get('available')?.value);
  // 严格匹配action要求的参数结构
  this.store.dispatch(AddItem({ item: formData }))
}

场景B：NgRx状态里存普通Item对象，发请求时再转FormData（更推荐的常规做法） #

FormData属于请求专用的特殊对象，不适合存在NgRx全局状态里，建议提交时先构造普通Item对象传给action，在处理接口请求的effect层再转成FormData：

onSubmit() {
  // 直接从表单取值构造符合Item类型的对象
  const formValue = this.userForm.value;
  const item: Item = {
    name: formValue.name,
    description: formValue.description,
    price: formValue.price,
    category: formValue.category,
    available: formValue.available,
    // 补全Item接口要求的其他必填字段
  };
  this.store.dispatch(AddItem({ item }));
}

后续在AddItem对应的effect里，拿到item对象后再转换为FormData格式调用接口即可。

额外优化 #

如果用Angular响应式表单，不需要逐字段调用get()取值，this.userForm.value可以直接拿到所有表单字段的键值对，减少重复代码。

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