I have a component here and it seems there's a memory leak in there because I am receiving the warning
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.
I have read about it but I am not sure how exactly to do that. Could you tell me how to cancel the events in the component or find the events that should be cancelled. if you could point me to an article or guide that helps in understanding that would be very helpful too.
here's the code, for the component.
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>
);
}
}
I looked around for how to cancel the subscriptions but not sure how exactly to do that. for example I have a click event on a button. how do I cancel that event ? and do I need to cancel onchange events too?