withFormik初始props变更后表单值未更新问题求助

这个问题我之前也碰到过！Formik的mapPropsToValues默认只会在组件首次挂载的时候执行一次，所以哪怕后续props.initialData更新了，表单里的values也不会跟着同步——这就是你看到的问题所在。下面给你两个实用的解决办法：

方法1：启用enableReinitialize配置项（最简单方案） #

这是最直接的解决方式，只需要在withFormik的配置里添加enableReinitialize: true，就能让Formik在props变化时重新调用mapPropsToValues来更新表单值。修改后的代码如下：

export default withFormik({
  mapPropsToValues: (props: Props) => {
    return { id: props.initialData.id, name: props.initialData.name };
  },
  handleSubmit: (values, { props, setSubmitting }) => {
    props.submitHandler(values);
    setSubmitting(false); // 别忘了提交后重置submitting状态哦
  },
  enableReinitialize: true, // 关键配置！开启props变更时的重新初始化
})(NewDatasourceForm);

这个配置相当于告诉Formik：“只要组件的props变了，就重新根据新props生成表单值”，完全匹配你的需求，代码改动极小。

方法2：手动监听props变化并更新（适合自定义场景） #

如果你的业务场景需要更精细的控制（比如只更新部分字段、更新前做校验判断），可以在NewDatasourceForm组件内部用useEffect监听props.initialData的变化，然后调用Formik提供的setValues方法手动更新：

const NewDatasourceForm = (props) => {
  const { values, touched, setValues } = props;
  
  useEffect(() => {
    // 当initialData发生变化时，同步更新表单指定字段
    setValues({
      id: props.initialData.id,
      name: props.initialData.name
    });
  }, [props.initialData, setValues]); // 依赖项要完整，避免遗漏更新或无限循环

  // ... 组件其余渲染逻辑
};

这种方式灵活性更高，适合有特殊业务规则的场景。

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