无法在表单提交时使用 Formik 执行 React state 更新

Question

当我单击按钮提交表单时，我收到以下警告：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Formik@http://localhost:3000/static/js/vendors~main.chunk.js:3815:28
div
div
CheckIn@http://localhost:3000/static/js/main.chunk.js:382:17
Route@http://localhost:3000/static/js/vendors~main.chunk.js:43553:29

当表单有效时会出现警告。 一旦我第二次单击该按钮，它就会成功提交。

import React from "react";
import { Formik } from "formik";
import { useHistory } from "react-router-dom";

export default function CheckIn({ user, setUser }) {
  const history = useHistory();

  return (
    <div>
        <Formik
          initialValues={{
            name: "",
            mail: ""
          }}
          validate={(values) => {
            const errors = {};

            if (!values.mail && user.mail) {
              values.mail = user.mail;
            }

            if (!values.name && user.name) {
              values.name = user.name;
            }

            if (!values.mail) {
              errors.mail = "Required";
            } else if (
              !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.mail)
            ) {
              errors.mail = "Invalid mail address";
            }

            return errors;
          }}
          onSubmit={(values, { setSubmitting }) => {
            history.push("/success");
            setUser(values);
            setSubmitting(false);
          }}
        >
          {({
            values,
            errors,
            handleChange,
            handleBlur,
            handleSubmit,
            isSubmitting,
          }) => (
            <form onSubmit={handleSubmit}>
              <input
                type="name"
                name="name"
                placeholder="Name"
                style={errors.name ? { border: "2px solid red" } : {}}
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.name || user.name}
              />
              <input
                type="email"
                name="mail"
                placeholder="E-Mail"
                style={errors.mail ? { border: "2px solid red" } : {}}
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.mail || user.mail}
              />

              <button
                type="submit"
                disabled={isSubmitting}
                className="btn wide"
              >
                Checkin
              </button>
            </form>
          )}
        </Formik>
      </div>
  );
}

不幸的是，警告对我没有帮助，因为一方面我不明白，另一方面，没有useEffect。

Answer 1

问题： history.push

此错误是由表单的onSubmit处理程序引起的：

onSubmit={(values, { setSubmitting }) => {
  history.push("/success");
  setUser(values);
  setSubmitting(false);
}}

您要做的第一件事是调用history.push导航离开页面并导致Formik组件卸载。 然后，您调用setSubmitting尝试更新Formik组件的 state - 但它已经卸载，因此您收到错误“无法在未安装的组件上执行 React state 更新”。

只是将history.push移动到列表中的最后一个操作导致错误到 go 对我来说，但我不喜欢这个解决方案，因为 React setState调用是异步的，所以在技术上仍然有可能发生错误. 我不明白为什么在离开此页面时需要手动调用setSubmitting ，所以我的建议是完全删除该调用。

onSubmit={(values) => {
  setUser(values);
  history.push("/success");
}}

确保setUser没有更新将被导航卸载的组件的 state。