CODEWITHSUNDEEP
reactjs
Asking
Asking

Reputation: 4172

Fetch Error "Promise returned from fetchData is ignored"

I created a component which is fetching data from an api.

import React, {useState, useEffect} from 'react';


const Users = () => {
    const [users, setUsers] = useState([]);
    useEffect(() => {
        fetchData();
        console.log('effect')
    }, []);

    const fetchData = async () => {
        const url = `https://jsonplaceholder.typicode.com/users`;
        const response = await fetch(url, {
                method: 'GET', // *GET, POST, PUT, DELETE, etc.
                mode: 'cors', // no-cors, *cors, same-origin
            }
        );
        const data = await response.json();
        console.log(data)
    };
    fetchData()

    return (
        <div>
    
        </div>
    );
};

export default Users;

I created fetch function, but anyway i can't get the response from server. After passing about 2 minutes, i'm getting in console 503 error. Why the fetch doesn't work?

Upvotes: 1

Views: 1770

Answers (3)

Anton Dmitrievich
Anton Dmitrievich

Reputation: 172

Working example https://codepen.io/tedseds/pen/vYOKowM

Also, don't call fetchData() in the render it causes infinity requests

The working code:

const Users = () => {
    const [users, setUsers] = useState([]);
    useEffect(() => {
        fetchData();
        console.log('effect')
    }, []);

    const fetchData = async () => {
        const url = `https://jsonplaceholder.typicode.com/users`;
        const response = await fetch(url, {
                method: 'GET', // *GET, POST, PUT, DELETE, etc.
                mode: 'cors', // no-cors, *cors, same-origin
            }
        );
        const data = await response.json();
      setUsers(data)
    };

    return (
        <div>
        Response: {users.map(item=>`${item.name}, `)}
        </div>
    );
};

Upvotes: 0

Jawad ul hassan
Jawad ul hassan

Reputation: 575

Following changes will help you get around it:

import React, { useState, useEffect } from "react";

const Users = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  async function fetchData() {
    const url = `https://jsonplaceholder.typicode.com/users`;
    const response = await fetch(url, {
      method: "GET",
      mode: "cors"
    });
    const data = await response.json();
    setUsers(data);
  }

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {users.map(user => (
        <h1>{user.name}</h1>
      ))}
    </div>
  );
};

export default Users;

Let me know if it helps.

Upvotes: 1

3960278
3960278

Reputation: 796

I am getting response here by just calling fetch or even hitting https://jsonplaceholder.typicode.com/users in browser

    const fetchData = async () => {
        const url = `https://jsonplaceholder.typicode.com/users`;
        const response = await fetch(url, {
                method: 'GET', // *GET, POST, PUT, DELETE, etc.
                mode: 'cors', // no-cors, *cors, same-origin
            }
        );
        const data = await response.json();
        console.log(data)
    };
    fetchData()

Upvotes: 1

Related Questions