0

У меня есть несколько состояний интерфейса. Например First_Scene, Second_Scene, Final_Scene. По умолчанию в сторе стоит First_Scene. Я получаю scene из пропсов в контейнере и рендерю

 render(){
  const {scene} = this.props;
  const Container = MyContainer[scene];
  return <Container />
 }

При заходе на страницу я считываю некое значение из урла и в зависимости от него отправляю запрос на сервер и после ОК ответа показываю Final_Scene.

Я вызываю в методе ComponentDidMount метод, где парсю урл и т.д. Тут же в контейнере я диспатчу некоторый асинхронный экшин, где делаю запрос на сервер и при успешном ответе снова диспатчу экшин, который мне устанавливает Final_Scene.

Но в контейнер сначала приходит все равно First_Scene, рендерится контейнер с этим значением, а потом уже меняется на Final_Scene. В итоге на несколько секунд можно увидеть FIrst_Scene.

Как собственно этого избежать?

1 ответ 1

1

Могу предложить два варианта:

  1. Когда вы посылаете запрос на сервер поставте флажок в хранилище "loading = true". В render методе проверьте заначение флага и верните null или что там вы хотели бы показать пока данные подгружаются. По получению ответа с сервера фнимите флажок.
  2. Уберите First_Scene из начального состояния

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.