@ParaBellum577

Как обойти ошибку react-progress-2?

всем привет!
Столкнулся с проблемой: поставил в свое приложение лоадер в шапке страницы "react-progress-2"
Вот такого плана.
Все работает на одной странице, но если я перехожу с одной страницы на другую, то получаю ошибку:5ce7b2ad28fb0104546408.png

Причем не важно, вызываю я эту функцию в дидмаунте или по клику или другому событию, результат одинаковый.
import Progress from "react-progress-2";
import "react-progress-2/main.css"

loadPage = () => {
  Progress.show();
  setTimeout(() => Progress.hideAll(),800);
}

<Progress.Component/>


Работает он очень просто. Но я так понимаю, что это синглтон компонент и он просто не хочет рабоать на енскольких страницах, как это обойти? Либо может кто-то подскажет другой лоадер? NProgress не получается настроить. Если что, приложение на Gatsby JS
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ответы на вопрос 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
1. Вы можете использовать только один компонент на странице, так как ссылка на инстанс пишется в прототип.
2. Причина ошибки в том, что при переходе вы не чистите таймаут. Сначала удаляется ссылка на инстанс, затем срабатывает ваш таймаут и происходит обращение к методу несуществующей ссылки. Чтобы избавиться от ошибки, достаточно чистить таймаут в componentWillUnmount:
loadPage = () => {
  Progress.show();
  this._hideAllTimeout = setTimeout(() => Progress.hideAll(),800);
}

componentWillUnmount() {
  clearTimeout(this._hideAllTimeout);
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы