Final Form提交后表单值还是旧数据怎么办？

萌新.世昌提问于 2026-01-30 05:43:29 阅读 204

交互

用Final Form做登录表单时遇到个怪问题，提交后表单值还是显示上一次输入的内容，怎么都清不掉…

我的代码是这样写的：


import { Form, Field } from 'final-form';

function LoginForm() {
  const onSubmit = async (values, form) => {
    try {
      await api.login(values);
      form.reset(); // 这里明明调用了重置
    } catch (err) {
      console.error(err);
    }
  };

  return (
    
      {({ handleSubmit }) => (
        
          
            {({ input, meta }) => (
              
                
                {meta.error && meta.touched && {meta.error}}
              
            )}
          
          {/* 密码字段类似 */}
          
        
      )}
    
  );
}

尝试过在成功回调里调用form.reset()，但提交成功后表单内容还是显示最后输入的值。用React DevTools看状态确实重置了，但视图没更新…

表单交互

我来解答赞 22 收藏

反馈

2 条解答

艺凝（打工版） Lv1

试试看在form.reset()后面加个forceUpdate，React有时候状态重置了视图不刷新。或者直接用 form.restart() 代替 form.reset() ，后者有时候不太灵光。

const onSubmit = async (values, form) => {

  try {

    await api.login(values);

    form.restart(); // 或者 form.reset(); this.forceUpdate();

  } catch (err) {

    console.error(err);

  }

};

记得检查下Field组件的name属性是不是唯一且正确，这个问题我之前也踩过坑。

2026-03-27 10:04

Tr° 慧青 Lv1

这问题是 Final Form 的表单状态和组件渲染不同步导致的。懒人方案是用 form.restart() 替代 form.reset()，前者会彻底清空表单状态并强制重新渲染。

修改后代码：

const onSubmit = async (values, form) => {

  try {

    await api.login(values);

    form.restart(); // 换成这个

  } catch (err) {

    console.error(err);

  }

};

如果还不好使，检查下登录成功后是否需要跳转页面或清除其他地方缓存的状态。

2026-01-30 08:10