Formik表单调用resetForm无法重置为默认初始值，始终返回prop传入值

修复方案 #

方案一：同步清空父级数据源（最推荐，避免父子数据不一致）

重置表单的逻辑本来就是回归无数据的新增状态，直接同步清空父级存储的contactData即可：

1. 父组件修改传参，把修改contactData的方法也传给子组件：

// 父组件代码
const [contactData, setContactData] = useState();
// ...
<First userData={contactData} setContactData={setContactData}/>
<Second userData={setContactData}/>

2. 子组件修改重置方法：

const resForm = () => {
  // 清空父级数据源，触发userData变为undefined
  props.setContactData(undefined);
  // 调用resetForm传入空初始值完成重置
  formik.resetForm({ values: initValues });
}

方案二：保留父级数据源（不需要清空contactData时使用）

如果业务需要保留父级的contactData不被清空，可以在子组件新增一个强制复位的标志位，控制initialValues的取值优先级：

function FirstComponent({userData}) {
    const [isUpdate, setUpdate] = useState(false);
    // 新增标志位：是否强制使用空初始值
    const [forceReset, setForceReset] = useState(false);
    const initValues = {
        id:'',
        email: '',
        name: '',
        contact: ''
    };
    useEffect(() => {
        userData!==undefined ? setUpdate(true) : setUpdate(false);
        // 有新的userData传入时，自动取消强制复位状态
        if(userData) setForceReset(false);
    }, [userData]);
    
    const formik = useFormik({
        enableReinitialize: true,
        validationSchema: FormSchema,
        // 优先判断强制复位标志，再判断userData
        initialValues: forceReset ? initValues : (userData || initValues),
        onSubmit: (values) => {
            console.log("the Data ", userData)
            console.log("onsubmit ", values);
        }
    })

    const resForm = () => {
        // 开启强制复位标志
        setForceReset(true);
        formik.resetForm({ values: initValues });
    }
}

这个方案下，表单重置后会一直保持空状态，直到下一次父组件传入新的userData，才会自动切换为编辑状态。

内容的提问来源于stack exchange，提问作者little rebel