У меня есть React route:
<Route path='/contract/:id' component={ContractForm}/>
, и я хотел бы прочитать значение этого параметра id в моем компоненте ContractForm для извлечения данных из базы данных (конечно, с использованием REST API и redux-saga) согласнок полученному значению идентификатора.
Я слежу за React Router Pass Param для компонента , и он обеспечивает решение:
<Route exact path="/details/:id" render={(props)=>{
<DetailsPage id={props.match.params.id}/>
}} />
Но мне нужно обработать значение id некоторое времядо рендеринга.Где (из какого события) я должен прочитать значение id?Я думаю о нескольких событиях, но ни одно из них не удовлетворяет:
- Я не могу прочитать id в ContractForm
constructor() или componentDidMount(), потому что эти события запускаются только один раз, если я перемещаюсь изтекущий контрактный объект напрямую к следующему контрактному объекту, тогда мой ContractForm не воссоздается из перемонтированного, поэтому события не происходят - Я не могу прочитать id в ContractForm
componentWillUpdate(nextProps, nextState), потому что он не запускается во время монтирования исоздание компонента. - Я могу сделать специальный метод processParams для чтения this.props.match.params и извлечения данных из базы данных.
render() {
const {contractId, description} = this.state;
this.processParams();
return (
<div>...</div>)}
Но этот метод (который вызывается при рендеринге) обновит глобальные или локальные параметры, и это вызовет еще один вызов рендеринга, поэтому я должен создать специальную логику в processParams для предотвращения второго раунда рендеринга.Мне нелегко делать такую логику.
Итак - где (когда) читать параметры, передаваемые маршрутизатором?
Учебные пособия являются довольно простыми и не углубляются в детали.
Я особенно заинтересован в загрузке данных REST API в реквизит .Я знаю (благодаря ответам) о getDerivedStateFromProps https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops , который является именно событием для загрузки данных REST API в состояние компонента, но я ищу аналогичный механизм (событие и т. Д.) Для загрузки данных REST APIв глобальный store props. Может быть, компонент не может выполнить такую загрузку? Может быть, приложение должно прослушивать какое-либо событие навигации, а после события навигации загружать данные в реквизиты магазина, а затем приложение может просто визуализировать эти глобальные данные с помощью представления компонента.
Может быть, это плохой дизайн для динамической загрузки данных API REST в реквизиты во время выполнения? Например, все учебные пособия по CRUD: http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/ https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f https://github.com/maprihoda/react-redux-crud загружают данные в подпорки при инициализации основного компонента приложения.Мое намерение состояло в том, чтобы я мог сначала загрузить список контрактов, а затем пользователь мог выбрать (перейти к) некоторый конкретный контракт, и мое приложение загрузит этот контракт (обширный график) в реквизиты при открытии формы контракта и повторно загрузит другой контракт в реквизиты после навигациик другому договору.