Estoy tratando de usar fetch() para simular obtener algunos datos de ./Network.ts y no funciona. Me sale esto en la consola:
Response {type: "basic", url: "csb.app/[object%20Promise]", redirected: false, status: 200, ok: true…}Mi componente:
import React, { useState, useEffect } from "react"; import { getOrders} from "./network"; export const Component: React.FC = () => { const [searchResults, setSearchResults] = useState({}); useEffect(() => { fetchResults(); },[]); const fetchResults = async() => { try { const data = await fetch(getOrders()); setSearchResults(data); } catch (e) { return console.log(e); } }; return ( <table className="table table-striped table-hover"> <thead className="thead-dark"> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Amount</th> <th scope="col">ETA</th> <th scope="col">Status</th> </tr> </thead> <tbody>{console.log(searchResults)}</tbody> </table> ); };Red.ts
interface Delivery { id: number; name: string; amount: number; status: string; eta?: number; } export const getOrders = (): Promise<Order[]> => { return new Promise((resolve) => { setTimeout(() => { const data = [ { id: 1, name: "Order 1", amount: 3, status: "active", eta: 15 }, { id: 2, name: "Order 2", amount: 5, status: "pending" }, { id: 3, name: "Order 3", amount: 3, status: "active", eta: 10 }, { id: 4, name: "Order 4", amount: 4, status: "upcoming" }, { id: 5, name: "Order 5", amount: 3, status: "active", eta: 25 }, { id: 6, name: "Order 6", amount: 3, status: "active", eta: 5 } ]; resolve(data); }, 1000); }); };Además, los necesito para rendirlos por estado y eta ascendiente. El estado debe ordenarse en el siguiente orden: activo, próximo, pendiente.
¿Alguna idea de cómo lograr esto?
Estoy tratando de usar fetch() para simular obtener algunos datos
Bueno, no deberías. Lo que está haciendo en getOrders es usar setTimeout para simular la obtención de algunos datos de forma asíncrona. Eso está bien, ¡pero no necesitas fetch para eso! Utiliza fetch solo cuando realmente realiza una solicitud de red para obtener datos, no para simulación. Así que simplemente suéltalo de tu código y funcionará:
const fetchResults = async() => { try { const data = await getOrders(); // ^^^^^^^^^^^^^^^^^ setSearchResults(data); } catch (e) { return console.log(e); } }; Cuando desee deshacerse de la simulación, debe cambiar solo la implementación de getOrders y colocar la llamada fetch() allí , reemplazando las cosas new Promise((resolve) => {…}) .