使用React+Formik如何保存表单值 支持用户后续返回继续填写

核心问题定位 #

• 拼写错误：initialValues 中字段名写错，savedForm.intrument 正确应为 savedForm.instrument，会导致该字段永远无法读取到Redux中存储的值
• Formik默认仅在首次初始化时读取initialValues：当你切页返回表单组件重新挂载时，若Redux存储的savedForm加载晚于Formik初始化，或者后续savedForm有更新，Formik不会自动同步最新值
• 初始化空值覆盖存储：组件刚挂载时，Formik会先生成基于初始默认值的formik.values，还没同步Redux中存储的内容，就触发useEffect将空值dispatch到Redux，直接覆盖了之前保存的表单数据，这是你返回时Redux值为空的核心原因

修正后的实现代码 #

const savedForm = useSelector(
  (state) => state.form.savedForm
);
    
const formik = useFormik({
  // 开启允许重新初始化，响应savedForm的更新
  enableReinitialize: true,
  initialValues: {
    // 修复拼写错误
    instrument: savedForm.instrument || "",
    client: savedForm.client || "",
  },
  validationSchema: validation,
  onSubmit: (values) => {
    console.log(values);
  },
});
    
useEffect(() => {
  // 加判断：只有当前表单值和Redux存储的值不一致时，才触发保存，避免初始化空值覆盖
  const isValueChanged = JSON.stringify(formik.values) !== JSON.stringify(savedForm)
  if (isValueChanged) {
    dispatch(saveForm(formik.values))
  }
}, [formik.values, savedForm, dispatch])

额外排查项 #

• 确认Redux的form reducer中，处理saveForm action时是正确合并更新savedForm，而非清空或覆盖整个form状态
• 确认路由切换逻辑中，没有触发清空form.savedForm的action

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