问修复此react内存泄漏
EN

Stack Overflow用户

提问于 2020-12-02 21:25:54

回答 1查看 201关注 0票数 0

我需要修复我的应用程序中的内存泄漏，但我不确定如何做。我有一个使用模式的组件，当我添加一个项目时，我得到了错误。这个模式是可重用的，我也在其他组件中使用它。这是主要组件：

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Card, Select, Form, Button } from 'antd';
import Table from 'components/Table';
import Modal from '../Modal';

import styles from '../index.module.scss';

const { Item } = Form;
const { Option } = Select;

const PersonForm = ({ details, form }) => {
  const [modalVisible, setModalVisible] = useState(false);

  const [name, setName] = useState(
    details?.name ? [...details?.name] : []
  );

  useEffect(() => {
    form.setFieldsValue({
 
      name: name || [],
    });
  }, [form, details, name]);

  const addName = values => {
    setName([...name, values]);
    setModalVisible(false);
  };

  const removeName = obj => {
    setName([...name.filter(i => i !== obj)]);
  };

  const cancelModal = () => {
    setModalVisible(false);
  };

  return (
    <div>

      <Card
        title="Names
        extra={
          <Button type="solid" onClick={() => setModalVisible(true)}>
            Add Name
          </Button>
        }
      >
        <Table
          tableData={name}
          dataIndex="name"
          removeName={removeName}
        />
      </Card>

      <Item name="name">
        <Modal
          title="Add Name"
          fieldName="name"
          onSubmit={addName}
          visible={modalVisible}
          closeModal={cancelModal}
        />
      </Item>
    </div>
  );
};

PersonForm.propTypes = {
  details: PropTypes.instanceOf(Object),
  form: PropTypes.instanceOf(Object),
};

PersonForm.defaultProps = {
  form: null,
  details: {},
};

export default PersonForm;

这是模态组件：

import React from 'react';
import PropTypes from 'prop-types';
import { Input, Form } from 'antd';
import Modal from 'components/Modal';
import LocaleItem from 'components/LocaleItem';

const { Item } = Form;

const FormModal = ({ visible, closeModal, onSubmit, fieldName, title }) => {
  const [form] = Form.useForm();

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 15 },
  };

  const addItem = () => {
    form
      .validateFields()
      .then(values => {
        onSubmit(values, fieldName);
        form.resetFields();
        closeModal(fieldName);
      })
      .catch(() => {});
  };

  const canceledModal = () => {
    form.resetFields();
    closeModal(fieldName);
  };

  return (
    <Modal
      onSuccess={addItem}
      onCancel={canceledModal}
      visible={visible}
      title={title}
      content={
        <Form {...layout} form={form}>
          <Item
            name="dupleName"
            label="Name:"
            rules={[
              {
                required: true,
                message: 'Name field cannot be empty',
              },
            ]}
          >
            <Input placeholder="Enter a name" />
          </Item>
        </Form>
      }
    />
  );
};

FormModal.propTypes = {
  visible: PropTypes.bool.isRequired,
  closeModal: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
  fieldName: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
};

FormModal.defaultProps = {};

export default FormModal;

在模式中添加项目时，我在测试文件中遇到内存泄漏。谁能指出为什么会发生这种情况，以及如何解决这个问题？谢谢

reactjs

电商安全场景方案

帮助电商行业客户一站式解决Web安全、黑产羊毛党对抗、高危漏洞、BOT工具、恶意入侵门户服务器等安全问题

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-03 08:15:14

从addItem函数中删除closeModal和form.resetFields。

const addItem = () => {
    form
      .validateFields()
      .then(values => {
        onSubmit(values, fieldName); // when this onSubmit resolves it closes the modal, therefor these two lines below will be executed when component is unmounted, causing the memory leak warning
        form.resetFields();
        closeModal(fieldName);
      })
      .catch(() => {});
  };

// instead maybe just:

const [form] = Form.useForm();

<Modal onOk={form.submit}>
  <Form form={form}>
    <Form.Item name="foo" rules={[{ required: true }]}>
      <Input />
    </Form.Item>
  </Form>
</Modal>