Si bien obtener información de una URL lleva mucho tiempo, ¿cómo puedo utilizar el selector de carga de arranque para ocultar el retraso y hacer que el sitio web se vea más interactivo?
Prefiero tener un solo estado que almacene toda la información sobre la solicitud, es decir, su status , data y error .
Según el campo de status , ha representado la interfaz de usuario adecuada (como cargar el control giratorio, la pantalla de error).
He usado el gancho de estado en el ejemplo a continuación, también puede usar el gancho reductor si lo prefiere.
function App(props) { const [{ status, data, error }, setState] = React.useState({ status: "PENDING", data: null, error: null }); React.useEffect(() => { let isCancelled = false; setState({ status: "PENDING", data: null, error: null }); fetch("https://jsonplaceholder.typicode.com/todos/1") .then(res => res.json()) .then(data => { if (isCancelled) { return; } setState({ status: "RESOLVED", data, error: null }); }) .catch((error) => setState({ status: "REJECTED", error, data: null })); return () => { isCancelled = true; }; }, []); if (status === "PENDING") { return <p>Loading...</p>; } else if (status === "REJECTED") { return <pre>{JSON.stringify(error)}</pre>; } else { return <pre>{JSON.stringify(data)}</pre>; } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode> ); <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>const [loading, setLoading] = useState(false) useEffect(() => { setLoading(true) // Do your Fetch and stuff setLoading(false)}, [])
Ahí tienes