Использование React-router-dom с React-transition-group вызывает исключение на ; Превышена максимальная глубина обновления.
Я создал сайт с использованием React-router-dom и хочу добавить анимацию при переходе между страницами с использованием маршрутов, что я пытался сделать с помощью React-transition-group. Сайт содержит смесь элементов и , и хотя элементы по-прежнему работают с React-transition-group, элементы завершаются с ошибкой:
Uncaught Invariant Violation: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.
На сайте есть несколько кнопок, которые выполняют действия на стороне сервера, а затем перенаправляют на основе набора переменных в обратном вызове, поэтому для этого необходимы определенные средства. Я попытался заменить перенаправления кодом для программного манипулирования историей реквизита, но это высветило еще одну проблему, заключающуюся в том, что несколько маршрутов используют HOC, чтобы гарантировать, что пользователь вошел в систему, и это выдает то же исключение при рендеринге компонента внутри HOC.
Это происходит потому, что компоненты повторно визуализируются, и добавлен код, чтобы определить, почему, это потому, что реквизиты маршрутизатора постоянно «меняются», поскольку они заменяются новым объектом, который в остальном идентичен к предыдущему объекту.
Это не относится к React-transition-group; Я попытался заменить это React-pose и у меня возникла та же проблема.
Сценарий копируется в песочнице ниже; эта версия работает, но если закомментирован в index.js и не закомментирован, возникает проблема.
Может ли кто-нибудь указать мне правильное направление, пожалуйста? ТИА.
https://codesandbox.io/s/nervous-lehmann-249uy