React TS2322报错：自定义提交函数无法赋值给FormEventHandler类型如何修复

问题根因 #

原生form元素的onSubmit事件触发时，只会给绑定的处理函数传入**表单事件对象FormEvent<HTMLFormElement>**作为参数，你当前定义的onSubmit函数要求第一个入参是TicketFullDTO类型，类型不匹配直接触发TS报错。

修复步骤 #

1. 调整onSubmit函数定义 #

修改入参为事件对象，先阻止浏览器默认的表单提交刷新行为，再手动组装需要提交的TicketFullDTO数据：

const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
  // 阻止默认提交行为
  e.preventDefault();
  // 组装提交数据：你当前status和submitDate是单独维护的state，需要合并到ticket对象中
  const submitData: TicketFullDTO = {
    ...ticket,
    status: status || ticket?.status,
    submitDate: submitDate || ticket?.submitDate
  };
  console.log(submitData);

  updateTicket(requestParams.id, submitData)
    .then(({ data }) => {
      console.log(data.title);
      history.replace("/support");
    })
    .catch((err) => {
      console.log(err);
    });
};

2. 优化状态维护（可选但推荐） #

你当前把status、submitDate和ticket拆成三个独立state维护，很容易出现数据不同步的问题，建议统一合并到ticket state中，修改对应控件的change逻辑即可：

• Select的onChange改为：

onChange={(e) => setTicket({...ticket, status: e.target.value as string})}

• 日期输入的onInput改为：

onInput={(e) => setTicket({...ticket, submitDate: e.target.value as unknown as Moment})}

调整后不需要再单独维护status和submitDate两个state，提交时直接使用ticket作为提交参数即可。

3. 补充ticket初始值（避免运行时报错） #

你当前ticket的初始值为undefined，修改属性时可能触发运行时报错，建议初始化时给空对象兜底：

const [ticket, setTicket] = useState<TicketFullDTO>({});

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