无法访问withFormik handleSubmit中的组件状态

Question

我正在使用formik（https://github.com/jaredpalmer/formik）来表示我的反应应用程序。 我希望能够在handleSubmit成功完成后更新组件状态以显示成功消息。 但我无法做到这一点。我收到了错误。

export default withFormik({
  mapPropsToValues ({ email }) {
    return {
      email: email || ''
    };
  },
  validationSchema: Yup.object().shape({
    email: Yup.string().email('Email not valid').required('Email is required')
  }),
  handleSubmit(values, { resetForm, setErrors, setSubmitting }) {

    Accounts.forgotPassword({
      email: values.email
    }, (error) => {
      if (error) {
        setErrors({ email: 'Error: ' + error.reason });
      } else {
        this.setState({success: 'Success: Check your inbox for a reset link!'});
        resetForm();
      }
      setSubmitting(false);
    });
  }
})(RecoverPassword);

Answer 1

我们无法从更高阶的组件访问包装组件。

Answer 2

无法从高阶组件访问包装组件的状态。 Formik具有内置的错误和状态处理设置程序和获取程序。

export default withFormik({
  mapPropsToValues ({ email }) {
    return {
      email: email || ''
    };
  },
  validationSchema: Yup.object().shape({
    email: Yup.string().email('Email not valid').required('Email is required')
  }),
  handleSubmit(values, { resetForm, setErrors, setSubmitting, setStatus }) {
    Accounts.forgotPassword({
      email: values.email
    }, (error) => {
      if (error) {
        setErrors({ email: 'Error: ' + error.reason });
      } else {
        resetForm();
        setStatus('Check your inbox for a reset link.');
        // setStatus is part of the "formik bag".
      }
      setSubmitting(false);
    });
  }
})(RecoverPassword);