我在这里有一个组件，似乎那里有内存泄漏 因为我收到了警告
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事件？