CODEWITHSUNDEEP
javascriptreactjsfetch
user7020610
user7020610

Reputation:

React Fetch not Fetching

In my App.js function, when it first loads, I want to fetch a website. This website contains .json data. The console gives the following error when I try to fetch the website:

App.js:9 GET https://geolocation-db.com/json/344ec440-6bfc-11eb-a0c0-b5dee9e67313 net::ERR_BLOCKED_BY_CLIENT
localhost:/1 Uncaught (in promise) TypeError: Failed to fetch
App.JS:9 GET https://geolocation-db.com/json/344ec440-6bfc-11eb-a0c0-b5dee9e67313 net::ERR_BLOCKED_BY_CLIENT
localhost:/1 Uncaught (in promise) TypeError: Failed to fetch

When I visit the website through the web browser, I'm able to see the JSON.

My App.js Code:

import logo from './logo.svg';
import './App.css';
import Weather from './Weather'
import React, { Component, useState  } from "react";

function App() {
  const [details, setDetails] = useState("0");
  
  fetch("https://geolocation-db.com/json/344ec440-6bfc-11eb-a0c0-b5dee9e67313")
      .then(response => response.json())
      .then((data) => {
        setDetails(data)
        console.log("hi")
      } );
    
  return (
    <div className="App">
      <div className="weatherWrap">
        <Weather longg="0" lat="0" name="China"/>
      </div>
    </div>
  );
}

export default App;

I'm assuming I'm fetching the website incorrectly. I also think that the way I did it, it will keep fetching every time. While I only want it to fetch once. Please let me know how to fix it. Thanks!

Upvotes: 0

Views: 725

Answers (2)

chandu
chandu

Reputation: 97

Try below piece of code:

const url = 'https://geolocation-db.com/json/344ec440-6bfc-11eb-a0c0-b5dee9e67313';

function App() {

const [details, setDetails] = useState([]);
const getDetails = async()=>{
     const response = await fetch(url);
     const details = await response .json();
     setDetails(details );
}

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

}

Upvotes: 1

Praveen Nambiar
Praveen Nambiar

Reputation: 4892

Here is the code that will work for you. Link

import "./styles.css"; import { useEffect, useState } from "react";

export default function App() {
  const [details, setDetails] = useState("0");

  useEffect(() => {
    fetch(
      "https://geolocation-db.com/json/344ec440-6bfc-11eb-a0c0-b5dee9e67313"
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      });
  }, []);

  return (
    <div className="App">
      <div className="weatherWrap">hello world</div>
    </div>
  );
}

Upvotes: 0

Related Questions