Pensé que useEffect se llama una vez solo después de renderizar, pero se ejecuta varias veces y no en el orden que esperaba.
Esperaba que enviara un mensaje de 'carga de datos' mientras la recuperación está en progreso y luego, una vez que se realiza la recuperación, renderice el campo de título y alerte "... Listo ..." una vez y ese debería ser el final.
Agregué ALERT y registros de la consola en los dos puntos para determinar el flujo y tanto las alertas como los registros de la consola aparecen más de una vez y en diferentes órdenes. ¿Podría ejecutar este código y ver el comportamiento? Mantuve la matriz del segundo argumento como nula para que se ejecute solo una vez, pero no ayuda.
Aclare si reaccionar RENDER significa MOSTRAR en pantalla. ¿Qué etapa indica LOAD? ¿Cuándo se hace la exhibición?
el código sigue:
import React, { useEffect, useState } from "react"; //import "./App.css"; function DemoFetchZ() { let data = { title: "Waiting for Data" }; const [todo, setTodo] = useState(data); const [isData, setData] = useState(false); const [isFetching, setFetching] = useState(false); useEffect(() => { // called after the first render async function fetchData() { setFetching(true); const response = await fetch( "https://jsonplaceholder.typicode.com/todos/1" ); console.log("response = ", response); let data = await response.json(); setTodo(data); //updt state setFetching(false); setData(true) console.log("Data = ", data); } fetchData(); }, []); //[isData] null value will execute once only? if (isFetching) { console.log("data loading ......") alert ("data loading") return (<div>...Data Loading.....</div>); } return ( <div> - Fetch <br /> {alert("..DONE...")} <span>Title: {todo.title}</span> </div> ); } export default DemoFetchZ;Su useEffect se ejecuta solo una vez por ciclo de renderizado, pero tiene varias actualizaciones de estado en su useEffect que provocan una nueva renderización. Por lo tanto, recibe muchas alertas.
Vea una demostración de su código y vea los registros de la consola, así como los comentarios.
También tenga en cuenta que useEffect
[name] ), su useEffect se ejecuta cuando cambia el estado/propiedad del nombrerefactorizarlo así.
import React, { useEffect, useState } from "react"; //import "./App.css"; const DemoFetchZ = () => { const [todo, setTodo] = useState({}); const [loading, setLoading] = useState(false); useEffect(() => { fetchData(); }, []); const fetchData = () => { setLoading(true); fetch("https://jsonplaceholder.typicode.com/todos/1") .then((response) => response.json()) .then((data) => { setTodo(data); setLoading(false); }) .catch((error) => { console.log(error); setLoading(false); }); }; return ( <> {loading ? ( <div>...Data Loading.....</div> ) : ( <div> - Fetch <br /> <span>Title: {todo ? todo.title : "no Title Found"}</span> </div> )} </> ); }; export default DemoFetchZ;