使用Formik的React项目中Material UI表单数据无法清除

问题背景 #

提交表单数据后调用formik.resetForm()，已确认Formik的values、errors、touched等状态已被清空（提交后触发验证提示无值），但文本框中的内容依然保留。

相关代码 #

...
const handleSubmitProduct = async (values: Object, resetForm: any) => {

  ... 处理表单数据的代码 ... 

  resetForm()

  if (response.ok) {
    console.debug(response.status)
  } else {
    console.error(response)
  }
}

const validate = (values: Object) => {
  const errors: any = {}

  if (!values.product_name) {
    errors.product_name = "Include name"
  } 
  return errors 
}

... 已定义initialValues ...  

const formik = useFormik({
  initialValues: initialValues,
  validate,
  onSubmit: (values: Object, { resetForm }) => {
    console.debug(JSON.stringify(values, null, 2))
    handleSubmitProduct(values, resetForm)
  },
})

return (
  <FormLabel>Display name</FormLabel>
   <TextField
     onChange={formik.handleChange}
     id="product_name"
     onBlur={formik.handleBlur}
     error={formik.touched.product_name && Boolean(formik.errors.product_name)}
     helperText={formik.touched.product_name && formik.errors.product_name}
   />
  <Button onClick={() => formik.handleSubmit()} variant="contained">
    Submit  
  </Button>
)

已尝试的解决方法 #

• 使用resetForm({values: {initialValues}})，结果相同
• 使用resetForm(initialValues)，结果相同
• 在onSubmit()中使用action.resetForm({values: {initialValues}})，结果相同
• 尝试改用<Formik />组件，但改动较大暂未完成

解决方案 #

问题核心在于TextField未与Formik的values状态绑定：Formik的handleChange会更新values，但文本框的显示值需要通过value属性同步Formik的状态，否则resetForm清空values后，文本框无法感知状态变化，会保留原有输入值。

修改TextField组件，添加value绑定即可解决：

<TextField
  onChange={formik.handleChange}
  id="product_name"
  onBlur={formik.handleBlur}
  value={formik.values.product_name} // 新增此行绑定状态
  error={formik.touched.product_name && Boolean(formik.errors.product_name)}
  helperText={formik.touched.product_name && formik.errors.product_name}
/>

如果initialValues中product_name有初始值，resetForm后文本框会自动回到该初始状态，符合预期逻辑。

内容的提问来源于stack exchange，提问作者engineer-x