javascript - 这是使用 React-Filepond 的内存泄漏吗？

问题描述

在生产中，FilePond 实例在自定义模式中初始化时似乎破坏了我的整个页面。出现标准灰色框，但不显示其中的文本。这在本地工作得很好，但是在将其投入生产之后，每当我尝试使用它时，浏览器上的选项卡最终都会冻结，我必须关闭它。我认为这可能是内存泄漏。

版本： React：16.5.2 multer：1.4.1 multer-s3：2.9.0 开发节点：10.15.3 生产节点：8.11.4（节点版本的巨大差异会导致此问题吗？）

我的服务器正在运行 node 并使用 multer 包作为文件上传的中间件来表达。我在成功时返回状态 200 以及文件密钥/路径供我在前端参考。

我曾尝试通过浏览器控制台记录快照，但并没有取得太大的成功。不幸的是，我无法在本地破解它，但对生产环境没有很多可访问性，因此很难在不发生任何错误的情况下缩小范围。我相信这是某种内存泄漏，因为控制台或哨兵没有报告任何错误，但它似乎很快使浏览器选项卡的响应速度越来越慢。关于如何更好地查明和诊断此错误的任何想法都将有助于加载。

在我的 getDerivedStateFromProps 和 componentDidMount 函数之后，我有了我的 handleInit 函数：

handleInit() {
    console.log('FilePond instance has initialised', this.pond);
}

return (
    <div className="card mx-3 p-3">
        <FiltersBar leftComponents={leftComponents} rightComponents={rightComponents} />
        <Table data={this.props.contact.attached_files || []} headers={tableHeaders} />
        <Modal
            state={this.state.modalState}
            title="Upload File"
            close={this.closeModal}
        >
            <FilePond
                ref={ref => (this.pond = ref)}
                files={this.state.files}
                allowMultiple={true}
                name="documents"
                oninit={() => this.handleInit()}
                server={
                        {
                            process: {
                                url:
                                    'endpoint-nodeserver',
                            method: 'POST',
                            onload: file => this.props.uploadContactFile(JSON.parse(file).values),
                            headers: {
                                    authorization: this.state.user,
                            },
                            onerror: () => alert('unable to upload this document')
                            },
                        }}
                allowRevert={false}
                onwarning={error => this.handleError(error)}
                onupdatefiles={fileItems => {
                this.setState({
                    files: fileItems.map(fileItem => fileItem.file),
                });
                }}
            />
        </Modal>
    </div>
);
}}

标签： javascriptreactjsfile-uploadmemory-leaksfilepond

javascript - 这是使用 React-Filepond 的内存泄漏吗？

问题描述

解决方案

推荐阅读