如何在表单action中触发Redux Dispatch？解决TS类型报错

错误原因 #

React表单的action属性（属于FormHTMLAttributes类型）要求传入的函数必须满足：接收FormData作为参数，返回值为void或Promise。而你当前的代码() => dispatch(addIncome())中，同步dispatch Redux action会直接返回该action对象（{ payload: undefined; type: "income/addIncome" }），这个返回值类型不符合要求，因此触发TypeScript类型错误。

修复方案 #

方案1：同步action场景 #

修改action函数，确保其返回void——只需在函数体内调用dispatch，不直接返回它的结果：

<form ref={formRef} action={(formData) => {
  dispatch(addIncome());
}}>

这里函数没有显式返回值，默认返回undefined，符合void类型要求。

方案2：异步action（Thunk）场景 #

如果addIncome是返回Promise的异步Thunk action，使用async/await让函数返回Promise：

<form ref={formRef} action={async (formData) => {
  await dispatch(addIncome());
}}>

async函数默认返回Promise<void>，完全符合类型要求。

额外注意 #

如果你的场景不需要使用React的表单action函数特性，也可以通过监听表单的onSubmit事件来处理：

<form ref={formRef} onSubmit={(e) => {
  e.preventDefault();
  dispatch(addIncome());
}}>

这种方式更传统，也能避免类型匹配问题，适合不需要利用React表单action的自动提交/FormData处理逻辑的场景。

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