reactjs - Formik 表格不会清除

Question

我试图用它的 hoc 数据 onClick 填充我的 formik 表单的 initialValue。使用 reForm() 时将表单清除回其第一个初始值 (initValues) 不起作用，并且它总是返回到道具的值。

家长：

const [contactData, setContactData] = useState();
.
..
....

<First userData={contactData}/>
<Second userData={setContactData}/>

孩子：

function FirstComponent({userData}) {
    const [isUpdate, setUpdate] = useState(false);
    const initValues = {
        id:'',
        email: '',
        name: '',
        contact: ''
    };
    useEffect(() => {
        // setContactData(userData)
        userData!==undefined ? setUpdate(true) : setUpdate(false);
        console.log("from form: ", userData)
    }, [userData]);
    
    const formik = useFormik({
        enableReinitialize: true,
        validationSchema: FormSchema,
        initialValues: userData || initValues,
        onSubmit: (values) => {
            // same shape as initial values
            console.log("the Data ", userData)
            console.log("onsubmit ", values);
        }
    })

    const resForm = () => {
        formik.initialValues = {initValues};
        console.log("prop ", userData)

        console.log("formik values ",formik.initialValues)
        formik.resetForm();
    }

用 formik.resetForm() 中的 initValues 替换 initialValues 似乎可行，但它会使表单重新初始化为userData prop -function FormComponent({userData})

标签： reactjsreact-hooksreact-propsformik

Answer 1

部分修复..只是将formik.resetForm()resForm() 中的修改为

formik.resetForm({
  values:initValues
});

但是当控制台登录 resForm() 时，来自父级的道具（userData）仍然存在