使用 Formik 进行异步/等待？答案

【问题标题】：Async/Await with Formik?使用 Formik 进行异步/等待？
【发布时间】：2019-07-29 22:41:44
【问题描述】：

我正在使用 formik，我想知道如何将 async/await 与 onSubmit 一起使用

<Formik
  initialValues={{ email: '' }}
  onSubmit={(values, { setSubmitting }) => {
    // how to do async/await here.
  }}
  validationSchema={Yup.object().shape({
    email: Yup.string()
      .email()
      .required('Required'),
  })}
>
  {props => {
    const {
      values,
      touched,
      errors,
      dirty,
      isSubmitting,
      handleChange,
      handleBlur,
      handleSubmit,
      handleReset,
    } = props;
    return (
      <form onSubmit={handleSubmit}>
        <label htmlFor="email" style={{ display: 'block' }}>
          Email
        </label>
        <input
          id="email"
          placeholder="Enter your email"
          type="text"
          value={values.email}
          onChange={handleChange}
          onBlur={handleBlur}
          className={
            errors.email && touched.email ? 'text-input error' : 'text-input'
          }
        />
        {errors.email &&
          touched.email && <div className="input-feedback">{errors.email}</div>}

        <button
          type="button"
          className="outline"
          onClick={handleReset}
          disabled={!dirty || isSubmitting}
        >
          Reset
        </button>
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>

        <DisplayFormikState {...props} />
      </form>
    );
  }}
</Formik>

【问题讨论】：

您能解释一下您想要达到的目标吗？使用您的 formik 输入状态作为有效负载发送 http 请求？

标签： javascript reactjs async-await formik

【解决方案1】：

您正在寻找类似的东西吗？

onSubmit={ async (values, { setSubmitting }) => {
    await ...
    setSubmitting(false)
}}

【讨论】：

请注意，不需要将setSubmitting明确设置为false：“如果onSubmit是异步的，那么一旦解决，Formik将自动代表您将isSubmitting设置为false。”来自formik.org/docs/api/…跨度>

【解决方案2】：

作为替代方案，您也可以创建一个单独的函数。

async function _handleSubmit(values) {
   await...
}


onSubmit={(values, { setSubmitting }) => {
    _handleSubmit(values)
    setSubmitting(false)
}}

【讨论】：