Получить данные перед разрешением маршрута - PullRequest
Новая
       41

Получить данные перед разрешением маршрута

0 голосов
/ 30 октября 2019

Я использую для маршрутизации «реагирующий маршрутизатор» lib. Перед рендерингом компонента страницы мне нужно получить данные. Я хочу показать загрузчик перед каждой маршрутизацией, потому что все маршруты нуждаются в данных с сервера. Все мои компоненты управляются контроллером, поэтому мое решение для этого - создать этот контроллер в конструкторе всех компонентов, а также при создании данных выборки контроллера.

Это работает, но я использую машинопись и хочу получить доступ кданные без (!) проверки данных. Лучшее решение для этого - использовать компонент-обертку, который ожидает данные и отображает текущую страницу. Для первой маршрутизации это работает, но componentDidMounnt «ниже в коде» вызывается только один раз, поэтому вторая маршрутизация не работает. 

<Router>
   <Switch>
     <MyRoute path="/login" component={LoginPage} exact={true} />
     <MyRoute path="/reg" component={RegistrationPage} exact={true} />
   </Switch>
</Router>

/*MyRoute*/
async componentDidMount() {
    try {
            await this.props.routeController.getController(this.props.path).then((controller: PageController) => {
                this.setState({
                    controller: controller
                })
                this.props.routeController.loading = false;
            })
        } catch(err) {
            // error handling
        }
    }

    render() {
        if (!this.props.routeController.loading) {
            const { controller } = this.state; 
            return (
                <this.props.component controller={controller} />
            )
        }

        return <div>LOADING</div>;
    }

Поэтому мне нужно получить данные перед маршрутизацией. После этого мне нужно визуализировать компонент страницы с данными в реквизите. Возможно ли это или это хорошее решение для этой проблемы? Если нет, то как я могу решить проблему с асинхронной маршрутизацией. Спасибо: -)

1 Ответ

0 голосов
/ 05 ноября 2019

Сделать состояние isLoading: false, затем в componentWiilMount () / DidMount () установить isLoading состояние true. После успешного сброса при извлечении isLoading на false; 

componenetWillMount/didMount(){
this.setState({
isLoading: true
})
fetchData().then(res => this.setState(isLoading: false))
.catch(err => this.setState({isLoading: false}));


render(){
return(
{this.state.isLoading ? <Loader /> : <Component View /> }
)
}
...