У меня есть компонент, и кажется, что там утечка памяти, потому что я получаю предупреждение
Can't call setState (or forceUpdate) 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 the componentWillUnmount method.
Я читал об этом, но я не уверен, как именно это сделать.Не могли бы вы сказать мне, как отменить события в компоненте или найти события, которые должны быть отменены.если бы вы могли указать мне статью или руководство, которое поможет понять это, было бы также очень полезно.
вот код для компонента.
import React, { Component } from "react";
import { Modal, Button, Icon, Select, Input, Row, Col, Spin } from "antd";
//import PDFJS from './pdf';
import styles from "./EditPdfDetailsModal.less";
const Option = Select.Option;
if (window.PDFJS) {
const PDFJS = window.PDFJS;
PDFJS.disableWorker = true;
}
export default class EditPdfDetailsModal extends Component {
state = {
file: this.props.item.file,
categoryid: "",
splitpdfData: "",
urls: [],
showSplitFiles: false,
loading: false
};
showSplitFiles = () => {};
editMergePdf = () => {
var formData = new FormData();
formData.append("filepath", this.props.item.pdfname);
let editUrl = devUrl + "trip/getpdfSplitViewtripdoc?json=true";
this.setState({ showSplitFiles: true, loading: true });
var that = this;
fetch(editUrl, {
method: "post",
credentials: "include",
body: formData
})
.then(function(response) {
return response.json();
})
.then(function(data) {
let urls = [];
for (var i = 0; i < data.files.length; i++) {
let fileurl =
agencyLibPdfUrl + "split/" + data.dir + "/" + data.files[i];
urls.push(fileurl);
}
that.setState({ splitpdfData: data, urls });
//=================================
if (window.PDFJS) {
let newurl =
"http://172.104.60.70/st_old/uploads/defaultdocs/7/split/1527165241-42557/1_1527165241-42557.pdf";
console.log("that.img", that);
PDFJS.getDocument(newurl).then(function getPdfHelloWorld(pdf) {
//
// Fetch the first page
//
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = that.img;
var context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
page.render({ canvasContext: context, viewport: viewport });
});
});
}
//=================================
//that.showSplitFiles();
console.log("data response : ", data);
//return data;
})
.catch(err => console.log(err));
};
handleNameChange = e => {
console.log("name change : ", e.target.value);
this.setState({ file: e.target.value });
};
handleChange = value => {
console.log("value selected : ", value);
this.setState({ categoryid: value });
};
submitDetails = () => {
var formData = new FormData();
formData.append("doc_id", this.props.item.docid);
formData.append("docname", this.state.file);
formData.append("id", this.props.item.docid);
formData.append("tripid", this.props.item.tripid);
formData.append("doctype", "important");
formData.append("categoryid", this.state.categoryid);
formData.append("submit", "Submit");
let submitUrl =
devUrl + "trip/editDocument/" + this.props.item.tripid + "?json=true";
var that = this;
fetch(submitUrl, {
method: "post",
credentials: "include",
body: formData
})
.then(function(response) {
return response.json();
})
.then(function(data) {
that.props.getUpdatedData();
that.props.closeModal();
console.log("data response : ", data);
//return data;
})
.catch(err => console.log(err));
};
componentWillUnmount() {}
render() {
var styling = "styles.vertical-center-modal";
let item = this.props.item;
let categories = this.props.impcategories;
let categoryOptions = [];
categories.map((item, index) => {
let option = (
<Option key={index} value={item.categoryid}>
{" "}
{item.categoryname}{" "}
</Option>
);
categoryOptions.push(option);
});
/* if(this.state.urls.length>0){
if(window.PDFJS){
PDFJS.getDocument(this.state.urls[0]).then(function getPdfHelloWorld(pdf) {
//
// Fetch the first page
//
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = this.img;
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
page.render({canvasContext: context, viewport: viewport});
});
});
}
}*/
let formStyle = { height: "200px", width: "550px" };
let splitPdfStyle = { height: "400px", width: "600px" };
return (
<Modal
visible={this.props.showModal}
wrapClassName={styling}
onCancel={this.props.closeModal}
zIndex={1100}
bodyStyle={this.state.showSplitFiles ? splitPdfStyle : formStyle}
footer={[
<Button
key="submit"
type="primary"
onClick={this.submitDetails.bind(this)}
>
Submit
</Button>
]}
>
{this.state.showSplitFiles ? (
<div>
{!this.state.loading ? (
<Spin
style={{ width: "100%", margin: "0 auto" }}
tip="Loading Pdf..."
/>
) : (
<div>
show files here<br />
<canvas ref={el => (this.img = el)}> </canvas>
</div>
)}{" "}
</div>
) : (
<div>
<Row gutter={24}>
<Col md={12} lg={12} xl={12}>
Category Name:<br />
<Select
//defaultValue={item.type}
placeholder="Please Select"
style={{ width: 220 }}
onChange={this.handleChange}
getPopupContainer={triggerNode => triggerNode.parentNode}
>
{categoryOptions}
</Select>
</Col>
<Col md={12} lg={12} xl={12}>
Document Name <br />{" "}
<Input
onChange={this.handleNameChange}
placeholder="Basic usage"
value={this.state.file}
style={{ width: "200px" }}
/>
</Col>
</Row>
<Row>
<Col>
{" "}
<div className={styles.buttons}>
<Button type="primary">Replace Pdf </Button>
<Button onClick={this.editMergePdf.bind(this)} type="primary">
Edit/Merge Pdf{" "}
</Button>
</div>{" "}
</Col>
<canvas ref={el => (this.imgs = el)}> </canvas>
</Row>
</div>
)}
</Modal>
);
}
}
Я искал, какотменить подписку, но не уверен, как именно это сделать.например, у меня есть событие нажатия на кнопку.как я могу отменить это событие?и мне тоже нужно отменять события onchange?