Я пытаюсь собрать воедино, как мне следует использовать метод componentDidMount ().
- Я использую реагировать и реагировать маршрутизатор
- Backend - это облачные функции Firebase и Firestore
У меня есть три маршрута, включая родительский компонент (/) - then / someLocation и / someItem. Кроме того, можно перейти к сказать / someLocation / someItem. Первоначально я выбираю и устанавливаю состояние с помощью запроса get в componentDidMount (). Проблема в том, что когда я обновляю дочерний компонент, я теряю состояние.
Из моего исследования я понимаю, что у меня есть два варианта или их комбинация (исключая хэш-маршрутизатор)
Хранить данные в локальном хранилище (возможно, это нормально для извлечения одной записи)
Выполнять запрос на получение при каждом обновлении страницы, что имеет смысл для родительского компонента
Каков наиболее распространенный шаблон проектирования для маршрутизации в реакции для этих случаев и какие запросы должны содержаться в родительском методе componentDidMount?
Спасибо! Любое направление, советы, хитрости или рекомендации с благодарностью.
render() {
const { jobs } = this.state
const getJobPost = (props) => {
let slug = props.match.params.slug
let job = jobs.find((job) => job.slug === slug)
return <JobPost {...props} job={job} isLoading={this.state.isLoading} />
}
return (
<Switch>
<Route
exact
path="/"
render={(routeProps) => (
<MainJobBoard
countryFilter={this.countryFilter}
handleFilter={this.handleFilter}
filterValue={this.state.filterValue}
isLoading={this.state.isLoading}
jobs={jobs}
{...routeProps}
/>
)}
/>
<Route exact path="/:location/:slug" render={getJobPost} />
</Switch>
)
}