Llevo todo el dia, y no puedo entender que es lo que esta pasando, pero parece que hay un return que me lleva al principio!!!!
He unido todo el codigo en la App
import { use } from "react";
import ErrorBoundary from "./error/ErrorBoundary";
function App() {
return (
<>
<ErrorBoundary>
{/* <Suspense fallback={<div>Cargando...</div>}> */}
<DataDisplay />
{/* </Suspense> */}
</ErrorBoundary>
</>
);
}
function DataDisplay() {
// Usamos 'use' para "esperar" la promesa de fetchData()
console.log("iniciando:");
const data = use(fetchData());
console.log("data:", data);
return (
<div>
<h1>{data.title}</h1>
<p>{data.completed ? "Completado" : "Pendiente"}</p>
</div>
);
}
const fetchData = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1',{mode: 'cors' });
console.log('Response received:', response);
const data = await response.json();
console.log('Data fetched successfully', data);
**return data;**
} catch (error) {
console.error(error);
throw error;
}
console.log('This will not run');
}
export default App;```
y esto es un trozo de los consoles; el return lo ha de ejecutar despues de *'Data fetched successfully'*. Por favor, darme alguna pista!!!!
App.tsx:36 Response received: Response {type: ‘cors’, url: ‘https://jsonplaceholder.typicode.com/todos/1’, redirected: false, status: 200, ok: true, …}
App.tsx:36 Response received: Response {type: ‘cors’, url: ‘https://jsonplaceholder.typicode.com/todos/1’, redirected: false, status: 200, ok: true, …}
App.tsx:38 Data fetched successfully {userId: 1, id: 1, title: ‘delectus aut autem’, completed: false}
App.tsx:38 Data fetched successfully {userId: 1, id: 1, title: ‘delectus aut autem’, completed: false}
App.tsx:22 iniciando:“`
