В производственном процессе экземпляр FilePond, похоже, ломает всю мою страницу при инициализации внутри пользовательского модального модуля.Появляется стандартное серое поле, но не текст внутри него.Локально это работает, но после запуска в производство, когда я пытаюсь его использовать, вкладка в браузере останавливается, и мне приходится закрываться.Я думаю, что это потенциально утечка памяти.
Версии: React: 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>
);
}}