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

萌新.世昌 阅读 173

用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看状态确实重置了,但视图没更新…

我来解答 赞 12 收藏
二维码
手机扫码查看
1 条解答
Tr° 慧青
这问题是 Final Form 的表单状态和组件渲染不同步导致的。懒人方案是用 form.restart() 替代 form.reset(),前者会彻底清空表单状态并强制重新渲染。

修改后代码:
const onSubmit = async (values, form) => {
try {
await api.login(values);
form.restart(); // 换成这个
} catch (err) {
console.error(err);
}
};


如果还不好使,检查下登录成功后是否需要跳转页面或清除其他地方缓存的状态。
点赞 15
2026-01-30 08:10