Arco Form表单提交后数据未更新，如何解决？

打工人新艳提问于 2026-02-08 12:49:35 阅读 24

组件

我在用Arco的Form组件做表单提交，点击提交按钮后数据能正常传到后端，但页面上的表单内容没有重置。用了resetFields()也不生效，控制台还报错：Cannot read properties of undefined (reading 'resetFields')。

代码结构是这样的：

const handleSubmit = async () => {
  try {
    await form.validateFields();
    const data = form.getFieldsValue();
    await api.submit(data);
    form.resetFields(); // 这里报错
  } catch (err) {
    console.error(err);
  }
};

我检查了form实例的获取方式，是通过然后用const form = useForm()[0]，但为什么resetFields会找不到呢？

我来解答赞 4 收藏

反馈

1 条解答

打工人洺华 Lv1

别走弯路，这问题我踩过。你 useForm()[0] 拿到的不是 form 实例，所以调用 resetFields 肯定报错。

Arco Design 的 Form 是通过 Form.useForm() 创建实例，但你得先用 Form 组件把表单包起来，再通过 form 属性传进去才行。光拿实例不绑定是没用的。

正确做法是：先把 form 实例正确初始化，然后在

上绑定它。

const [form] = Form.useForm();



const handleSubmit = async () => {

  try {

    await form.validateFields();

    const data = form.getFieldsValue();

    await api.submit(data);

    form.resetFields(); // 现在能用了

  } catch (err) {

    console.error(err);

  }

};



return (

  

    

      

    

    

  

);

核心就一点：form={form} 这个属性必须传给

组件，不然你的实例就是“脱管”的，resetFields 自然无效。我当初也漏了这步，折腾半小时才看出来。

2026-02-08 21:06