Javascript Can'；t使用Formik对未安装的组件执行React状态更新

我被困在了该怎么办的问题上。完全错误是：

警告：无法对已卸载的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务。在福米克(http://localhost:3000/static/js/0.chunk.js:42765:19)

import React，{Fragment，useState}来自“React”；
从“样式化组件”导入样式化；
从“Formik”导入{Formik，Field}；
从“Yup”导入*作为Yup；
从“react redux”导入{connect}；
从“../../components/UI/Forms/Button”导入按钮；
从“../../components/UI/标题/标题”导入标题；
从“../../components/UI/Messages/Message”导入消息；
从“../../components/UI/Modal/Modal”导入模态；
从“../../components/UI/Forms/Input”导入输入；
从“../../components/styles/Wrappers”导入{StyledForm}”；
从“../../store/actions”导入*作为操作；
const buttonswapper=styled.div`
显示器：flex；
宽度：100%；
边缘底部：2rem；
证明内容：周围的空间；
`;
const MessageWrapper=styled.div`
位置：绝对位置；
底部：0雷姆；
宽度：100%；
填充：0 3rem；
`;
const ProjectSchema=Yup.object（）.shape({
项目：Yup.string（）
.required（“项目是必需的”）
.min（2，“太短”），
});
常量输入项目=({
项目
addProject，
加载，
错误，
开的，
接近，
编辑项目，
}) => {
常量loadingText=project？“编辑…”：“添加…”；
console.log（项目）；
返回(
{project？“编辑项目”：“添加新项目”}
{project？“在此处更改项目”：“在此处键入项目”}
{
//发送我们的项目
const res=项目
？等待编辑项目（project.id，值）
：等待添加项目（值）；
设置提交（假）；
如果（res）{
close（）；
}
resetForm（）；
}}
>
{（{values，handleChange，isSubmitting，isValid，resetForm}）=>(
{project？“编辑项目”：“添加项目”}
{
close（）；
resetForm（）；
}}
>
取消
{错误}
)}
);
};
const mapStateToProps=（{projects}）=>({
加载：projects.loading，
错误：projects.error，
});
const mapDispatchToProps={
addProject:actions.addProject，
editProject:actions.editProject，
};
导出默认连接（mapStateToProps、mapDispatchToProps）（InputProject）；

是

if（res）close（）resetForm（）之前，调用关闭模式并卸载表单发生了什么？此时是否需要重置表单？@drewrese关闭（）和重置表单（）似乎不是问题所在，因为我曾尝试在某一点上移除它们以进行故障排除，但这对问题没有任何影响OK，只是从您提供的有限代码片段中猜测。我只是在寻找任何看起来可能导致排队状态更新的东西。您知道什么组件在安装后抱怨更新吗？你能提供复制步骤吗？例如，你在做什么导致了问题？@drewerese它说福米克正在抱怨。所以这个表单是一个双添加/编辑表单，如果项目通过，它要么创建一个新的，要么编辑一个旧的。我在创建一个新项目时没有问题，但是当我去编辑时，它会给我这个错误，所以在
onSubmit
中调用
editProject
似乎会允许问题发生？您是否可以包括action creator代码，并提供此表单如何工作以及在两种“模式”之间切换的概述？浏览从用户单击submit按钮到操作完成发生的情况。
if（res）是否关闭（）resetForm（）之前，调用关闭模式并卸载表单发生了什么？此时是否需要重置表单？@drewrese关闭（）和重置表单（）似乎不是问题所在，因为我曾尝试在某一点上移除它们以进行故障排除，但这对问题没有任何影响OK，只是从您提供的有限代码片段中猜测。我只是在寻找任何看起来可能导致排队状态更新的东西。您知道什么组件在安装后抱怨更新吗？你能提供复制步骤吗？例如，你在做什么导致了问题？@drewerese它说福米克正在抱怨。所以这个表单是一个双添加/编辑表单，如果项目通过，它要么创建一个新的，要么编辑一个旧的。我在创建一个新项目时没有问题，但是当我去编辑时，它会给我这个错误，所以在
onSubmit
中调用
editProject
似乎会允许问题发生？您是否可以包括action creator代码，并提供此表单如何工作以及在两种“模式”之间切换的概述？浏览从用户单击submit按钮到操作完成的过程？
import React, { Fragment, useState } from "react";
import styled from "styled-components";
import { Formik, Field } from "formik";
import * as Yup from "yup";
import { connect } from "react-redux";

import Button from "../../components/UI/Forms/Button";
import Heading from "../../components/UI/Headings/Headings";
import Message from "../../components/UI/Messages/Message";
import Modal from "../../components/UI/Modal/Modal";
import Input from "../../components/UI/Forms/Input";
import { StyledForm } from "../../components/styles/Wrappers";

import * as actions from "../../store/actions";

const ButtonsWrapper = styled.div`
  display: flex;
  width: 100%;
  margin-bottom: 2rem;
  justify-content: space-around;
`;
const MessageWrapper = styled.div`
  position: absolute;
  bottom: 0 rem;
  width: 100%;
  padding: 0 3rem;
`;

const ProjectSchema = Yup.object().shape({
  project: Yup.string()
    .required("The project is required.")
    .min(2, "Too short."),
});

const InputProject = ({
  project,
  addProject,
  loading,
  error,
  opened,
  close,
  editProject,
}) => {
  const loadingText = project ? "Editing..." : "Adding...";

  console.log(project);
  return (
    <Fragment>
      <Modal opened={opened} close={close}>
        <Heading noMargin size="h1" color="white">
          {project ? "Edit your project" : "Add your new Project"}
        </Heading>
        <Heading bold size="h4" color="white">
          {project ? "Change your project here" : "Type your project here"}
        </Heading>
        <Formik
          initialValues={{
            project: project ? project.name : "",
          }}
          validationSchema={ProjectSchema}
          onSubmit={async (values, { setSubmitting, resetForm }) => {
            // send our project
            const res = project
              ? await editProject(project.id, values)
              : await addProject(values);
            setSubmitting(false);
            if (res) {
              close();
            }
            resetForm();
          }}
        >
          {({ values, handleChange, isSubmitting, isValid, resetForm }) => (
            <StyledForm>
              <Field
                type="text"
                name="project"
                placeholder={project ? project.name : "Write your project..."}
                onChange={handleChange}
                value={values.project}
                component={Input}
              />
              <ButtonsWrapper>
                <Button
                  contain
                  color="main"
                  type="submit"
                  disabled={!isValid || isSubmitting}
                  loading={loading ? loadingText : null}
                >
                  {project ? "Edit Project" : "Add Project"}
                </Button>
                <Button
                  type="button"
                  color="red"
                  contain
                  onClick={() => {
                    close();
                    resetForm();
                  }}
                >
                  Cancel
                </Button>
              </ButtonsWrapper>
              <MessageWrapper>
                <Message error show={error}>
                  {error}
                </Message>
              </MessageWrapper>
            </StyledForm>
          )}
        </Formik>
      </Modal>
    </Fragment>
  );
};

const mapStateToProps = ({ projects }) => ({
  loading: projects.loading,
  error: projects.error,
});

const mapDispatchToProps = {
  addProject: actions.addProject,
  editProject: actions.editProject,
};

export default connect(mapStateToProps, mapDispatchToProps)(InputProject);