React+Formik表单开发：如何正确丢弃更改并重置表单？

看起来你遇到的核心问题是：调用componentWillMount()无法重置表单，而使用React.createRef()获取Formik实例时又出错。让我们一步步拆解问题并解决它：

为什么之前的方法无效？ #

1. 手动调用componentWillMount()没用：这是React的生命周期方法，只会在组件挂载阶段自动执行，手动调用不会触发数据重新获取或表单值更新。你应该把数据获取逻辑抽成独立方法，而不是依赖生命周期方法的手动调用。
2. Formik的ref没正确绑定：你之前用Formik的component属性渲染子组件，这种写法会创建一个新的组件实例，导致你的ref无法正确指向Formik的核心实例，自然调用resetForm()会报错。

解决方案：正确使用Formik的ref并重置表单 #

步骤1：修改Formik的渲染方式（改用Render Prop） #

把component属性换成render prop写法，这样可以直接把ref绑定到Formik组件上，拿到真正的Formik实例：

<Formik
  initialValues={this.state.experiment}
  onSubmit={this.handleSubmit}
  ref={this.formik} // 直接绑定ref到Formik组件
>
  {formikProps => (
    <ExperimentForm {...formikProps} submitText="Save Changes" />
  )}
</Formik>

步骤2：修复discardChanges()方法 #

现在你可以通过ref调用Formik的resetForm()方法，它会自动把表单值重置为初始化时的initialValues（也就是你的原始实验数据）。同时，如果你需要重新从数据库拉取最新数据，可以调用props.refetch()（你已经在props里声明了这个方法）：

discardChanges () {
  // 重置表单到原始的initialValues
  this.formik.current.resetForm();
  // 关闭弹窗
  this.setState({ isDialogOpen: false });
  // 可选：如果需要从数据库重新拉取最新数据，调用refetch
  this.props.refetch();
}

额外优化：抽离数据获取逻辑 #

把原来在componentWillMount/componentDidMount里的实验数据获取逻辑抽成独立方法，这样在需要的时候可以随时调用，而不是依赖生命周期：

componentDidMount() {
  this.fetchExperiment();
}

// 独立的获取数据方法
fetchExperiment = async () => {
  // 这里写你的数据获取逻辑，比如GraphQL查询或API请求
  const experimentData = await fetchYourExperimentData(this.props.match.params.id);
  this.setState({ experiment: experimentData });
  // 如果需要同步更新Formik的初始化值，调用resetForm
  if (this.formik.current) {
    this.formik.current.resetForm({ values: experimentData });
  }
}

// 在discardChanges里调用
discardChanges () {
  this.formik.current.resetForm();
  this.setState({ isDialogOpen: false });
  this.fetchExperiment(); // 重新获取最新数据
}

为什么这样能解决问题？ #

• Formik的resetForm()方法是官方提供的重置表单的方式，它会将表单值、错误信息、提交状态都恢复到初始化状态。
• 改用render prop写法后，ref直接绑定到Formik实例，避免了component属性带来的实例隔离问题。
• 抽离数据获取方法让你可以灵活控制何时重新拉取数据，保证表单和后端数据一致。

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