Блог

Я знаю, что поведение / функция react-router по умолчанию не помогает нам легко перезагружать текущий компонент, но мне это действительно нужно в моем приложении.

Мое приложение имеет дело с продуктами. У меня есть список продуктов, который я могу загрузить, и когда я нажимаю на элемент, в нем отображаются соответствующие сведения о продукте.

На этой странице у меня есть ссылки на связанные продукты, которые загружают тот же компонент, но с другой информацией о продукте, расположенной по адресу

 <Route path="/products/:id/details" component={ProductDetail} />
 

Я извлекаю данные в своем componentWillMount, и кажется, что если я только изменю URL, новый компонент НЕ будет смонтирован, и поэтому у меня всегда отображаются мои старые данные, ничего не извлекая.

Как новичок, использующий React, я ищу некоторую помощь или некоторые приемы для перезагрузки компонента, соответствующего этой странице. Я имею в виду возможность перезагрузки ProductDetail с помощью хорошего продукта.

Я попытался осмотреться с помощью componentWillUpdate (метод, в котором я вижу, что URI маршрутизатора изменяется: D), но я не могу setState внутри него, чтобы перезагрузить мой компонент (похоже, это вообще не очень хорошая практика)

Есть идеи, как я могу заставить это работать?

РЕДАКТИРОВАТЬ: согласно первому ответу, я должен использовать onEnter. Теперь я застрял на способе передачи состояния / реквизита соответствующему компоненту :

 const onEnterMethod = () => {
    return fetch(URL)
        .then(res => res.json())
        .then(cmp => {
            if (cmp.length === 1) {
             // How to pass state / props to the next component ?
            }
        });
};
 

Способ обработки зависит от того, используете ли вы flux, redux или как вы хотите управлять своими действиями. Кроме того, я бы попытался использовать свойство onChange компонента Route (проверьте документы React router):

     <Route path="/products/:id/details" component={ProductDetail} onChange={someMethod} />
 

А затем в someMethod создайте действие, если вы используете redux или, однако, выполняется в потоке.
Сокращение будет:

     <Route path="/products/:id/details" component={ProductDetail} onEnter={onEnterHandler(store)} />
 

И обработчик onEnterHandler с хранилищем redux:

     function onEnterHandler(store) {
      return (nextState, replace) => {
        store.dispatch({
          type: "CHANGEPRODUCT",
          payload: nextState.params.id
        })
      };
    }
 

А затем в вашем компоненте ProductDetail вы должны напечатать новую информацию (для завершения этой части потребуется немного больше знаний в библиотеках redux и redux-sagas).

Имейте в виду, что React — это всего лишь часть представления, пытаться решить все эти проблемы, используя только react, не только не рекомендуется, но и может испортить ваш код.