Рекомендации по извлечению данных при использовании реагирующего маршрутизатора

Question

Я хочу спросить, что является лучшей практикой в ​​следующем случае.Представьте себе ситуацию ниже:

 <Route path='/search/:term?' render={(props) => {
                return (<ProductList
                   items={this.state.DataFromAPI}
                   {...props}
                   />)
              }} />

То, что происходит выше, это то, что представьте, что у меня где-то есть кнопка поиска. Когда пользователь нажимает кнопку поиска , я бы:

1) получал данные из API и сохранял в this.state.DataFromAPI

2) Также измените URL на "/ search / someTerm"программно

Теперь вы можете догадаться, что произойдет.Данные будут поступать с шага 1, а также соответствующий компонент (в данном случае ProductList) будет обрабатываться маршрутизатором благодаря шагу 2, и ProductList получит необходимые данные с использованием реквизитов, как в фрагменте кода.

Однако естьсейчас проблема.

Если пользователь напрямую набирает в браузере URL "/ search / someTerm", выборка данных больше не происходит.Это ясно, потому что, как я сказал ранее, выборка данных произойдет , когда пользователь нажмет кнопку , и я передам данные в качестве реквизита на маршрут.Поскольку щелчка нет, нет и выборки данных.

Так что делать в том случае, если я хочу, чтобы данные также загружались, когда пользователь вводит URL-адрес?Я полагаю, компонент - в данном случае ProductList - должен сам запрашивать данные?

Answer 1

Я представляю себе сценарий, в котором вы хотите убедиться, что во время рендеринга ProductList есть данные для поиска.

Я предлагаю следующее:

1. Передайте API-метод (из которого вы запрашиваете данные в родительском компоненте) в список продуктов.
2. Теперь в методе ProductList componentDidMount проверьте: если он не получает соответствующие данные в подпорках, вызовите метод с получением поискового запроса изпоиск по местоположению.
3. Когда метод api-запроса устанавливает состояние в родительском компоненте, тогда дочерний элемент будет перерисован при необходимости

.