从Formik onSubmit处理程序更新状态导致useEffect触发两次

基础概念

Formik: 是一个流行的React库，用于处理表单的状态和验证。 useEffect: 是React的一个Hook，用于在组件渲染后执行副作用操作。 状态更新: 在React中，状态的改变会导致组件重新渲染。

类型与应用场景

Formik适用于需要处理复杂表单逻辑的应用，如注册、登录、数据提交等。 useEffect适用于需要在组件生命周期内执行特定操作的场景，如数据获取、订阅或手动更改DOM等。

问题原因

当Formik的onSubmit处理程序更新状态时，会导致组件重新渲染。如果在这个过程中useEffect也被触发，可能会出现useEffect被调用两次的情况。这通常是因为组件首次渲染时useEffect被调用一次，状态更新后再次渲染导致useEffect再次被调用。

解决方法

为了避免这种情况，可以在useEffect中添加依赖数组，确保只有在特定状态变化时才触发useEffect。

import React, { useState, useEffect } from 'react';
import { Formik, Form, Field } from 'formik';

const MyForm = () => {
  const [submitted, setSubmitted] = useState(false);

  useEffect(() => {
    if (submitted) {
      // 执行提交后的操作
      console.log('Form submitted');
      // 完成操作后重置状态
      setSubmitted(false);
    }
  }, [submitted]); // 依赖数组确保只在submitted状态变化时触发

  const handleSubmit = (values, { setSubmitting }) => {
    setTimeout(() => {
      console.log(JSON.stringify(values, null, 2));
      setSubmitted(true); // 更新状态触发useEffect
      setSubmitting(false);
    }, 400);
  };

  return (
    <Formik initialValues={{ name: '' }} onSubmit={handleSubmit}>
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="name" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default MyForm;

在这个示例中，useEffect依赖于submitted状态。只有当submitted状态改变时，useEffect才会被调用，从而避免了不必要的重复调用。

通过这种方式，可以有效地控制useEffect的触发时机，确保应用的性能和逻辑正确性。