Fetch using react

Question

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%20Promise]", 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?

@Andy I modified the code, is this how is supposed to be? Now I'm getting in console Response {type: "basic", url: "csb.app/[object%20Promise]", redirected: false, status: 200, ok: true…} — Christian
– Christian, Commented Jun 17, 2022 at 16:08
@Christian10 Check the first code example. developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch — Dilshan
– Dilshan, Commented Jun 17, 2022 at 16:13
@3limin4t0r I've modified now the code, forgot to rename getDeliveries to getOrders. Is the functions from Network.ts — Christian
– Christian, Commented Jun 17, 2022 at 16:33
fetch(getOrders()) doesn't make sense. getOrders already returns the data. Only use await getOrders(), nothing else. fetch expects an url as the argument, not a promise. — Bergi
– Bergi, Commented Jun 17, 2022 at 16:35

Bergi · Accepted Answer · 2022-06-17 16:38:45Z

2

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.

answered Jun 17, 2022 at 16:38

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fetch using react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related