Как исправить проблему использования EE в загрузчике

Question

Это полезный эффект, и я сталкиваюсь с ним по крайней мере раз в месяц. : (

В любом случае,

У меня есть компонент, который выполняет рендеринг одного из двух компонентов на основе состояния состояния. Это работает нормально, за исключением одной проблемы. Я получаю печально известный "мерцание" визуализации предыдущий компонент. Я пытаюсь замаскировать это с помощью третьего компонента - тупого загрузчика. Вот где возникает проблема. Я не могу заставить эту глупую вещь работать.

Мой рабочий код следующий: единственные релевантные части - это те, что с комментариями. Прокрутите далее вниз для моего нерабочего решения псевдокода.

Спасибо.

import React, {useState} from 'react';
import { BrowserRouter, Route, Redirect } from "react-router-dom";
import { withRouter } from "react-router";
import {Switch} from 'react-router';
import LandingWithoutClients from './PageComponents/Landing';
import LandingWithClients from './PageComponents/Landing/LandingWithClients';
import Workflows from "./PageComponents/Workflows";
import SaveAndLoad from "./PageComponents/SaveAndLoad";
import Calendar from "./PageComponents/Calendar";
import Navbar from "./PageComponents/Navigation/Navbar";
import Authentication from './PageComponents/Authentication'
import Navigation from "./PageComponents/Navigation";
import { MuiPickersUtilsProvider } from 'material-ui-pickers';
import MomentUtils from '@date-io/moment';
import db from "./services/indexDB";
import SaveIcon from "@material-ui/icons/Save";


function App(props){
    const [clientExistsState, updateClientsExistsState] = useState(false);

    db.clients.toArray(function(data){
            if(data[0]){
               updateClientsExistsState(true)
            }else{
               updateClientsExistsState(false)
            }
    })

    let Nav  = clientExistsState   ? Navbar : Navigation

    //_____________________________________________________If clientsExists assign Landing with LandingWithClients otherwise assign Landing with LandingWithoutClients

    let Landing = clientExistsState ? LandingWithClients : LandingWithoutClients
    //___________________________________________________________________________________


    function redirectToClientsList(){
        window.location.href = "/";
    }

    function redirectToCalendar(){
        window.location.href = "/calendar";
    }

     function redirectToAuthentication(){
        window.location.href = "/authentication";
    }


     function redirectToSaveAndLoad(){
        window.location.href = "/save-and-load";
    }



    return (
       <div className="App">
            <Provider>
                <MuiPickersUtilsProvider utils={MomentUtils}>
                    <BrowserRouter>
                        <div>
                         <Nav 
                           endpointProps = {props} 
                           redirectToClientsList = {redirectToClientsList} 
                           redirectToCalendar={redirectToCalendar}
                           redirectToAuthentication={redirectToAuthentication}
                           redirectToSaveAndLoad={redirectToSaveAndLoad}

                           />
                            <Switch>
                                <Route exact path="/" component={Landing} /> {/* Assign Landing Component*/}

                                <Route exact path="/client/:id/client-name/:client/workflows" component={Workflows} />
                                <Route exact path="/calendar" component={Calendar} />
                                <Route exact path="/authentication" component={Authentication} />
                                 <Route exact path="/save-and-load" component={SaveAndLoad} />
                                <Redirect from="/*" to="/" />
                            </Switch>
                        </div>
                    </BrowserRouter>
                </MuiPickersUtilsProvider>
            </Provider>
        </div>
    );

}

export default withRouter(App);

здесь исправление псевдокода с двумя экземплярами useEffect

function App(props){

    // code ...

   cons [ loaderBool, setLoaderBool] = useState(true);
   let Landing = Loader;


    useEffect(() => {

        if (loaderBool) {
            setTimeout(() => {
                setLoaderBool(false)
            },500)
        }
    }, [])


    useEffect(() => {

        if (loaderBool) {
            Landing = Loader
        } else {
            Landing = clientExistsState ? LandingWithClients : LandingWithoutClients
        }
    }, [loaderBool])

    return(

            <div>
              <Route exact path="/" component={Landing} />
            </div>
    )

}

Answer 1

Попробуйте useMemo.

const Landing = useMemo(() => {
  if (!loaderBool) {
    if (clientExistsState) {
      return LandingWithClients;
    }

    return LandingWithoutClients;
  }

  return Loader;
}, [clientExistsState, loaderBool]);

Answer 2

Я исправил это так:

import React, {useState, useEffect} from 'react';
import { BrowserRouter, Route, Redirect } from "react-router-dom";
import { withRouter } from "react-router";
import {Switch} from 'react-router';
import LandingWithoutClients from './PageComponents/Landing';
import LandingWithClients from './PageComponents/Landing/LandingWithClients';
import Workflows from "./PageComponents/Workflows";
import SaveAndLoad from "./PageComponents/SaveAndLoad";
import Calendar from "./PageComponents/Calendar";
import Navbar from "./PageComponents/Navigation/Navbar";
import Loader from './PageComponents/Loader';
import Authentication from './PageComponents/Authentication'
import Navigation from "./PageComponents/Navigation";
import { MuiPickersUtilsProvider } from 'material-ui-pickers';
import MomentUtils from '@date-io/moment';
import db from "./services/indexDB";
import SaveIcon from "@material-ui/icons/Save";
import Context,{Provider} from "./services/context";


// if client is active display Navigation.
// if client is not active then display NavigationWitSlide
// create new landing page


function App(props){
    const [loaderBool, setLoaderBool] = useState(true)
    const [clientExistsState, updateClientsExistsState] = useState(false);

    db.clients.toArray(function(data){
            if(data[0]){
               updateClientsExistsState(true)
            }else{
               updateClientsExistsState(false)
            }
    })

    let Nav  = clientExistsState   ? Navbar : Navigation
    let Landing = clientExistsState ? LandingWithClients : LandingWithoutClients


    function redirectToClientsList(){
        window.location.href = "/";
    }

    function redirectToCalendar(){
        window.location.href = "/calendar";
    }

     function redirectToAuthentication(){
        window.location.href = "/authentication";
    }


     function redirectToSaveAndLoad(){
        window.location.href = "/save-and-load";
    }

    // check if clients exists

   useEffect(()=>{
      setTimeout(()=>{
         setLoaderBool(false)
      },500)
   },[])

    return (
       <div className="App">
            <Provider>
                <MuiPickersUtilsProvider utils={MomentUtils}>
                    <BrowserRouter>
                        <div>
                         <Nav 
                           endpointProps = {props} 
                           redirectToClientsList = {redirectToClientsList} 
                           redirectToCalendar={redirectToCalendar}
                           redirectToAuthentication={redirectToAuthentication}
                           redirectToSaveAndLoad={redirectToSaveAndLoad}

                           />
                            <Switch>
                                <Route exact path="/" component={(function(){

                                            if(loaderBool){
                                                return Loader
                                            }else{
                                                return Landing
                                            }
                                }())} />
                                <Route exact path="/client/:id/client-name/:client/workflows" component={Workflows} />
                                <Route exact path="/calendar" component={Calendar} />
                                <Route exact path="/authentication" component={Authentication} />
                                 <Route exact path="/save-and-load" component={SaveAndLoad} />
                                <Redirect from="/*" to="/" />
                            </Switch>
                        </div>
                    </BrowserRouter>
                </MuiPickersUtilsProvider>
            </Provider>
        </div>
    );

}

export default withRouter(App);