I'm trying to use fetch() to simulate getting some data from ./Network.ts and doesn't work. I get this in console:

Response {type: "basic", url: "csb.app/[object Promise]", redirected: false, status: 200, ok: true…}

My component:

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>
  );
};

Network.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);
  });
};

Also, I need them to render them by status and eta ascendant. Status should be sorted in the following order: active, upcoming, pending.

Any ideas how to achieve this?

CodePudding user response：

I'm trying to use fetch() to simulate getting some data

Well you shouldn't. What you're doing in getOrders is using setTimeout to simulate getting some data asynchronously. That's fine - but you don't need fetch for that! You use fetch only when really making a network request to get data, not for simulation. So just drop it from your code and it'll work:

const fetchResults = async() => {
  try {
    const data = await getOrders();
//               ^^^^^^^^^^^^^^^^^
    setSearchResults(data);
  } catch (e) {
    return console.log(e);
  }
};

When you want to get rid of the simulation, you should change only the getOrders implementation and put the fetch() call inside there, replacing the new Promise((resolve) => {…}) stuff.