Реактивные предварительные условия рендеринга

Question

Перед загрузкой приложения React мне необходимо проверить 2 условия

1. Пользователь вошел в систему, если не перенаправить на страницу входа
2. Все пользовательские настройки, полученные с помощью API,если не отображать экран загрузки.

Итак, в методе рендеринга у меня есть следующие условия:

if (!this.isUserLoggedIn()) return <NotifyPleaseLogin />;
else if (!this.state.PageCheck) {
  return (
    <PageLoading
      clientId={Config.clientId}
      setPageReady={this.setPageReady()}
    />
  );
} else {
  return "Display the page";

В этом сценарии я ожидаю, что произойдет, еслипользователь не авторизован, пользователь перенаправлен на страницу входа.Если пользователь вошел в систему и в данный момент страница получает запрос API, он увидит компонент PageLoading (экран загрузки) и, наконец, если страница готова, страница отобразится.

Сейчас я получаю Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.ошибка, которая связана с тем, что я выполняю обновление setState в методе Render родительского объекта, а также получаю TypeError: props.setPageReady is not a function at PageLoading.js:29 ошибку при попытке запустить родительскую функцию, которая устанавливает для состояния PageReady значение true, как показано ниже

setPageReady() {
    this.setState({ PageCheck: true });
  }

Как это настроить, чтобы дочерний элемент мог отображать загрузочную страницу до тех пор, пока страница не будет готова (во время этого дочерний процесс может выполнять вызов API и извлекать пользовательские настройки), а затем дать родителю знать, что все параметры получены и находятся в избыточности, чтобы родительский элемент могпродолжить загрузку страницы?

Answer 1

Вы можете передать PageCheck как реквизит от Parent к и показать / скрыть загрузчик в компоненте на основе этого реквизита.

  <PageLoading
      clientId={Config.clientId}
      pageCheck={this.state.PageCheck}
     setPageReady={this.setPageReady}
    />

Затем вызовите setPageReady внутри успеха и ошибки вызова API, который вы делаете в дочерней функции:

axios.get(api)
.then((response) => {
     //assign or do required stuff for success
   this.props.setPageReady();
})
.catch((error) => {
    //do error related stuff
this.props.setPageReady();  //as you need to hide loader for error condition as well
})

Answer 2

state = {
    isAuthorized: false,
    pageCheck: false    
};

---

componentDidMount() {
    if(this.isUserLoggedIn()) {
        this.setState({ 
            isAuthorized: true                
        });
    }   
}

---

{!this.state.isAuthorized ?
  <NotifyPleaseLogin />
:
(!this.state.pageCheck ?
  <PageLoading
      clientId={Config.clientId}
      setPageReady={this.setPageReady()}
   />
  :
  "Display the page")  
}

Answer 3

Этого легко добиться, добавив больше состояний для активного управления вашим компонентом:

state = {
    isAuthorized: false,
    pagecheck: false    
};

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

componentDidMount() {
    if(this.isUserLoggedIn()) {
        this.setState({ 
            isAuthorized: true                
        });
    }   
}

Используя наше состояние, мы решаем, что отображать.

render() {
    const {
      pagecheck,
      isAuthorized
    } = this.state;

    if(!isAuthorized){
      return <NotifyPleaseLogin />;
    }

    if(!pagecheck) {
      return (
        <PageLoading
          clientId={Config.clientId}
          setPageReady={() => this.setPageReady()}
        />
      );    
    }

    return "Display the page";
}

Примечание: Ранее вы передавали this.setPageReady() в Pageloading.Это, однако, выполняет функцию и передает результат в Pageloading.Если вы хотите передать функцию, вам нужно либо удалить скобки this.setPageReady, либо заключить ее в другую функцию () => this.setPageReady()