Реагировать, реагировать на маршрутизатор и асинхронную загрузку данных

Question

Я использую реагировать, alt.js и реагировать на маршрутизатор, и строю приложение с базовым CRUD. Есть пункт меню для "Создать элемент", и он вызывает модальный режим (с использованием response-bootstrap...) и при отправке запускает действие для создания какой-либо модели на бэкэнде, а затем выполняет browserHistory.push (в соответствии с рекомендациями в документах о реакции маршрутизатора), когда это завершится, перейдите на страницу элемента для вновь созданного элемента.

Так что в основном случае это работает. Например, если я на главной странице приложения, это работает. Однако, если я уже был на странице сведений об элементе для другого элемента (скажем, я был на /item/1 и я только что создал /item/2поэтому я пытаюсь перенаправить на /item/2 со страницы /item/1).

И моя логика асинхронной загрузки (ну, по крайней мере, вызов действия для fetchItem) в componentDidMount из ItemViewPage компонент реагирования, который кажется довольно типичным, основываясь на всех примерах, которые я могу найти в Интернете.

И проблема в том, что если страница уже была отображена, componentDidMount никогда не вызывается, потому что компонент уже смонтирован (!). И вот URL моей страницы обновляется до /item/2, но содержимое все еще для /item/1,

Итак, мой вопрос... Да. Я не прав, чтобы начать загрузку данных из componentDidMount? Должен ли я сделать это каким-то другим методом жизненного цикла (скажем, componentWillReceiveProps, так как реагирующий маршрутизатор установит новый идентификатор)? Или есть какое-то другое место, откуда мне следует запускать загрузку данных (например, есть ли в реакции-маршрутизаторе какая-то функция, о которой я не знаю, которая это обрабатывает)?

Answer 1

Поскольку React умный и знает, что вы повторно используете компонент для своего маршрута, он останется подключенным. Выбранный вами метод жизненного цикла не сможет справиться с заданием, поскольку он вызывается при первоначальном монтировании компонента один раз.

Я бы посоветовал вам использовать componentWillReceiveProps и там вы можете проверить, скажем, id поле вашего товара изменилось. Это означает, что вы, вероятно, должны обновить, так как есть новые, разные данные для рендеринга.