Final Form提交后表单值还是旧数据怎么办?
用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看状态确实重置了,但视图没更新…
form.restart()替代form.reset(),前者会彻底清空表单状态并强制重新渲染。修改后代码:
如果还不好使,检查下登录成功后是否需要跳转页面或清除其他地方缓存的状态。