javascript - 如何在 Formik 'onSubmit' 函数中正确地 'useState'？

Question

我在 Next.js 应用程序中使用 Formik，但遇到了一个不知道如何解决的问题。我的提交Button是一个接受showSpinner道具的组件。如果为 true -> 按钮被禁用，并且显示按钮中的加载微调器。showSpinner价值取决于loading来自useState钩子。这是一个相关的代码：

 export default function register() {
  const [loading, setLoading] = useState(false)
  return (
  <>
  <Layout>
    <div className={styles.registerContainer}>
      <div className={styles.registerFormContainer}>

        <h1 className={styles.registerHeader}>Sign Up</h1>
        <Formik
          initialValues={{
            email: '',
            password: '',
            passwordConfirm: '',
            acceptedTerms: false
          }}
          onSubmit={
            (values, { setSubmitting }) => {
              console.log(loading)
              // here loading == false as expected

              setLoading(true)
              console.log(loading)
              // here loading == false even though i set it to true 

              initFirebase()
              firebase.auth().createUserWithEmailAndPassword(values.email, values.password)
                .then((res) => {
                  console.log('done!')
                })
                .catch(function (error) {
                  // Handle Errors here.
                  console.log(error)
                })
                .finally(() => {

                  console.log(loading)
                  //here loading == false too, even though I expected it to be true

                  setSubmitting(false)
                  setLoading(false)
                })
            }

          }
        >
          <Form>
            <FormikText label="Email:"
              name="email"
              type="email"
              id="email" />
            <FormikPassword label="Password:"
              name="password"
              id="password"
            />
            <FormikPassword label="Confirm Password:"
              name="passwordConfirm"
              id="passwordCOnfirm"
            />
            <FormikCheckbox
              name="acceptedTerms"
              id="acceptedTerms"
            >
              <span className={styles.checkboxLabel}>
                I agree to the <Link href="/terms" ><a className={styles.registerLink}>Terms of Service</a></Link>  and  <Link href="/privacy"><a className={styles.registerLink}>Privacy/Cookie Policy</a></Link>
              </span>
            </FormikCheckbox>
            <div className={styles.buttonContainer}>
              <Button type="submit" color="blue" showSpinner={loading}>Sign Up</Button>
            </div>
          </Form>
        </Formik>
      </div>
    </div>
  </Layout>
</>
  )
}

即使我Button的以某种方式按预期工作（微调器按预期显示），在通过 函数调用console.loging的值之后，我注意到这是 我所期望的。是因为 React 批处理调用的方式吗？我的问题是：loadingonSubmitfalseuseState

1. 如何以正确的方式处理这种情况？
2. 如果loading == false在那些中console.logs，为什么我的Button工作按预期工作？

标签： javascriptreactjsnext.jsformik

Answer 1

是因为 React 批处理 useState 调用的方式吗？

我认为是的，这正是Formik提供isSubmitting标志的原因，尝试使用它而不是跟踪您自己的loading状态，我知道它适用于您当前的规范，但是当这个组件变得更复杂时，您可能会遇到一些问题

你的代码看起来像这样

export default function register() {
  return (
    <>
      <Layout>
        <div className={styles.registerContainer}>
          <div className={styles.registerFormContainer}>
            <h1 className={styles.registerHeader}>Sign Up</h1>
            <Formik
              initialValues={{
                email: "",
                password: "",
                passwordConfirm: "",
                acceptedTerms: false,
              }}
              onSubmit={async (values) => {
                try {
                  initFirebase();
                  await firebase
                    .auth()
                    .createUserWithEmailAndPassword(
                      values.email,
                      values.password
                    );
                } catch (e) {
                  // Handle Errors here.
                  console.log(error);
                }
              }}
            >
              {({ isSubmitting }) => (
                <Form>
                  <FormikText
                    label="Email:"
                    name="email"
                    type="email"
                    id="email"
                  />
                  <FormikPassword
                    label="Password:"
                    name="password"
                    id="password"
                  />
                  <FormikPassword
                    label="Confirm Password:"
                    name="passwordConfirm"
                    id="passwordCOnfirm"
                  />
                  <FormikCheckbox name="acceptedTerms" id="acceptedTerms">
                    <span className={styles.checkboxLabel}>
                      I agree to the{" "}
                      <Link href="/terms">
                        <a className={styles.registerLink}>Terms of Service</a>
                      </Link>{" "}
                      and{" "}
                      <Link href="/privacy">
                        <a className={styles.registerLink}>
                          Privacy/Cookie Policy
                        </a>
                      </Link>
                    </span>
                  </FormikCheckbox>
                  <div className={styles.buttonContainer}>
                    <Button
                      type="submit"
                      color="blue"
                      showSpinner={isSubmitting}
                    >
                      Sign Up
                    </Button>
                  </div>
                </Form>
              )}
            </Formik>
          </div>
        </div>
      </Layout>
    </>
  );
}

取自这里https://formik.org/docs/examples/async-submission