TextField无法显示GET API获取的默认值问题求助

问题根源 #

1. Formik的initialValues仅在组件挂载时读取一次，异步API返回数据后更新initialFieldValues不会触发Formik重新同步表单值。
2. 所有TextField使用了非受控属性defaultValue，而非绑定Formik的values对象，导致数据更新无法反映到输入框。
3. initialFieldValuesCopy是组件每次渲染时的浅拷贝，初始为空，无法同步后续API返回的数据。

解决步骤 #

1. 给Formik添加enableReinitialize={true}，让Formik在initialValues变化时重新初始化表单值。
2. 将TextField的defaultValue替换为value={values.xxx}，绑定Formik提供的values对象，转为受控组件。
3. 移除无用的initialFieldValuesCopy，直接使用Formik的values或initialFieldValues。
4. 同步Avatar及文本显示内容到Formik的values，确保数据一致性。

修改后的关键代码片段 #

Formik配置修改

<Formik
  initialValues={initialFieldValues}
  enableReinitialize={true} // 新增：允许重新初始化
  validateOnChange={false}
  validateOnBlur={true}
  onSubmit={(values, { setSubmitting }) => {
    handleFormSubmit(values, imageFile, setSubmitting);
  }}
>

TextField组件修改（以fullName、email为例）

// Full Name输入框
<TextField
  fullWidth
  name="fullName"
  label="Full Name"
  value={values.fullName} // 替换defaultValue为受控绑定
  onChange={(e) => setFieldValue('fullName', e.target.value)}
/>

// Email输入框
<TextField
  fullWidth
  name="email"
  label="Email"
  value={values.email} // 绑定Formik的values
  disabled
/>

Avatar及文本显示同步

<AvatarStyle
  src={values.photoURL || '/assets/images/placeholder.jpg'}
/>

<FullNameBox>
  <Typography sx={{ fontWeight: Fonts.MEDIUM }}>
    {values.fullName}
  </Typography>
  <Typography sx={{ color: (theme) => theme.palette.text.secondary }}>
    {values.email}
  </Typography>
</FullNameBox>

修复PUT API硬编码问题

// handleFormSubmit中替换硬编码字段
formData.append('Id', data.id);
formData.append('Username', data.email);
formData.append('Email', data.email);

效果说明 #

修改后，当API返回用户数据并更新initialFieldValues时，Formik会自动重新初始化表单值，TextField通过受控绑定正确显示默认值，用户修改后的内容也能正常提交到后端。

内容的提问来源于stack exchange，提问作者Abdul Wahab