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

Question

在生产环境中，在自定义模式下初始化FilePond实例时，似乎会破坏我的整个页面。出现标准灰色框，但内部没有文本。这在本地完美运行，但是将其投入生产后，无论何时我尝试使用它，浏览器上的选项卡最终都会冻结，因此我必须关闭它。我认为这可能是内存泄漏。

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

我的服务器正在运行节点，并使用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>
);
}}

Answer 1

这似乎是一个前端问题，而不是您的服务器问题，所以我不认为这与您的节点服务器的差异有关。