He creado una aplicación que consta de una pantalla de carga. Sin embargo, si la API falla después de 5 segundos, se transmitirá un mensaje de falla. Recibo demasiados errores de renderización en la línea que he mencionado en el código a continuación.
He usado la función setTimeout para reemplazar el mensaje de falla si la API falla después de 5 segundos de cargar la página. El resto de la funcionalidad de mi aplicación funciona bien.
El código de mi aplicación es: -
function App() { //Is website loaded for first time? const [loadingFirstTime, setLoadingFirstTime] = useState(true); //Has the site loading failed? If yes, pass that to loading component const [loadingFailed, setLoadingFailed] = useState(false); //To be run first time the website is loaded useEffect(() => { getMovies() .then(res => setMoviesDetails(res)) .then(() => setLoadingFirstTime(false)); }, []) ................... some code here ............. //If the details of api haven't been loaded or api loading failed if (Object.keys(moviesDetails).length === 0 && loadingFirstTime) { //------**Error occurs here after 5 seconds as per the console**----------------- //check for the same thing after 5 seconds, if initial data still has been loaded? setTimeout(() => { if (Object.keys(moviesDetails).length === 0 && loadingFirstTime) { setLoadingFailed(true); } }, 5000); return ( <LoadingScreen status={loadingFailed} /> ) } return ( <> ........ App components which are working fine ............. </> ); }Código para mi componente de carga: -
function LoadingScreen({status}) { const [loadingText, setLoadingText] = useState("Loading the site..."); //check if site loading failed and display appropiate message if (status) { setLoadingText("Website loading failed. Please reload or contact the administrator."); } return ( <div className="loading-screen"> <h1>{loadingText}</h1> </div> ) }En React, debe evitar cambiar de estado al renderizar, que es lo que está haciendo en su componente LoadingScreen cuando está configurando loadingText.
setLoadingText("Website loading failed. Please reload or contact the administrator.");Esto sucede todo el tiempo que pasa un valor verdadero a estado. Esa línea hace que el componente LoadingScreen se vuelva a representar una y otra vez en un bucle infinito.
Generalmente, es mejor implementar esta función dentro de una función useEffect como esta:
function LoadingScreen({ status }) { const [loadingText, setLoadingText] = useState("Loading the site..."); useEffect(() => { if (status) { const newLoadingText = "Website loading failed. Please reload or contact the administrator."; if (newLoadingText !== loadingText) { // This state setter provokes a re-render so set only if new value is // different than the actual value stored in state setLoadingText(newLoadingText); } } }, [loadingText, status]); return ( <div className="loading-screen"> <h1>{loadingText}</h1> </div> ); }