Каковы стандартные шаблоны для использования метода реагирования componentDidMount () для получения данных API для нескольких маршрутов? - PullRequest
0 голосов
/ 14 октября 2019

Я пытаюсь собрать воедино, как мне следует использовать метод componentDidMount ().

  • Я использую реагировать и реагировать маршрутизатор
  • Backend - это облачные функции Firebase и Firestore

У меня есть три маршрута, включая родительский компонент (/) - then / someLocation и / someItem. Кроме того, можно перейти к сказать / someLocation / someItem. Первоначально я выбираю и устанавливаю состояние с помощью запроса get в componentDidMount (). Проблема в том, что когда я обновляю дочерний компонент, я теряю состояние.

Из моего исследования я понимаю, что у меня есть два варианта или их комбинация (исключая хэш-маршрутизатор)

  1. Хранить данные в локальном хранилище (возможно, это нормально для извлечения одной записи)

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

Каков наиболее распространенный шаблон проектирования для маршрутизации в реакции для этих случаев и какие запросы должны содержаться в родительском методе 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>
    )
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...