CODEWITHSUNDEEP
javascriptreactjsfetch-api
mare
mare

Reputation: 89

React js fetch API

I am learning React.js and trying to fetch API like this

constructor() {
    super();

    this.state = {person: []};
}

componentDidMount() {
    fetch('https://randomuser.me/api/?results=500', {mode: 'no-cors'})
            .then(results => {
                return results.json();
            })
            .then(data => {
                let person = (data.results || []).map((pic) => {
                    return(
                            <div key={pic.results}></div>
                            )
                })

                this.setState({person: person});
                console.log("state", this.state.person);
            })
}

render() {

    return (
            <div>
                {this.state.person}
            </div>
    );
}

and this is the error I get

http://prntscr.com/k36ggq

I am pretty new in this, so if anyone can help me with this that would be great. Thanks

Upvotes: 3

Views: 24212

Answers (4)

sumanta
sumanta

Reputation: 1

const getapi = async () => {
  try {
    let res = await fetch("https://jsonplaceholder.typicode.com/todos/2");
    let fi = await res.json();
    console.log(fi);
  } catch (error) {
    console.log(error);
  }
};

getapi();

enter code here

Upvotes: 0

Heartbit
Heartbit

Reputation: 1836

There are many ways that you can fetch data from your server. so here I am trying to describe two of them.

1. By native browser Fetch API:


const RandomUserContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('https://randomuser.me/api/?results=500').then(response => {
      
    }).then(jsonData => 
      setData(jasonData)
     )
  }, [])

  return (
    <RandomUserComponent data={data}>
      {children}
    </RandomUserComponent>
  )
}

2. by react-query:

This will give you more synchronized handling like loading, Error, Caching, and more.

First, at the top level of your app, you should provide it.

import { QueryClient, QueryClientProvider } from "react-query";
import RandomUserContainer from "./RandomUserContainer";

const queryClient = new QueryClient()
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <RandomUserContainer count={500}/>
      </div>
    </QueryClientProvider>
  );
}

Then your AdsContainer could fetch data as bellow:

import {useQuery} from "react-query";

const AdsContainer = ({children, count}) => {
  const query = useQuery('todos', async () => {
     const API = `https://randomuser.me/api/?results={count}`;
     const response = await fetch(API);
     return await response.json();
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    <RandomUserComponent data={query.data}>
      {children}
    </RandomUserComponent>
  )
}

Upvotes: 0

duc mai
duc mai

Reputation: 1422

Change mode to cors will solve your problem I guess.

 fetch('https://randomuser.me/api/?results=500', {mode: 'cors'})

Upvotes: 0

Jeeva
Jeeva

Reputation: 1590

Try by setting the header as follows. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS You just remove the mode: 'no-cors' in your code, 

componentDidMount() {
    fetch('https://randomuser.me/api/?results=500')
    .then(response =>  response.json())
    .then(resData => {
       //console.log(JSON.stringify(resData))
       //do your logic here       
       //let person = resData.results
       this.setState({ person: resData.results }); //this is an asynchronous function
    })
}

render(){

  return(
  <div>
    { 
      this.state.person.map((personRecord) => {
        return <div key={personRecord.id.value}> {personRecord.name.first} </div>
      })
    }
  </div>
  )
}

//sample result json 
{
"results": [ //we already fetched the results array of object from resData
        {
            "gender": "female",
            "name": {
                "title": "mrs",
                "first": "astrid",
                "last": "jørgensen"
            },
            "location": {
                "street": "2675 strandgårdsvej",
                "city": "hurup thy",
                "state": "danmark",
                "postcode": 63288,
                "coordinates": {
                    "latitude": "-27.6956",
                    "longitude": "104.8135"
                },
                "timezone": {
                    "offset": "+5:30",
                    "description": "Bombay, Calcutta, Madras, New Delhi"
                }
            },
            "email": "astrid.jø[email protected]",
            "login": {
                "uuid": "25ab4c50-9a8c-48bc-a276-acae2209aa19",
                "username": "happymouse810",
                "password": "journey",
                "salt": "OGXHTU6k",
                "md5": "5c659a3d97b081fc18f0bf94f246751d",
                "sha1": "407020d4230121788180244775edd6fbea56c375",
                "sha256": "0cc94ec5d89f71903c9f74dcd12253240b1269e75a3ca67eae3f4d578e47d3f8"
            },
            "dob": {
                "date": "1978-03-28T17:31:08Z",
                "age": 40
            },
            "registered": {
                "date": "2017-04-19T14:15:02Z",
                "age": 1
            },
            "phone": "10566067",
            "cell": "24745172",
            "id": {
                "name": "CPR",
                "value": "295410-3587"
            },
            "picture": {
                "large": "https://randomuser.me/api/portraits/women/12.jpg",
                "medium": "https://randomuser.me/api/portraits/med/women/12.jpg",
                "thumbnail": "https://randomuser.me/api/portraits/thumb/women/12.jpg"
            },
            "nat": "DK"
        }
    ]
}


//By using this way we can able to get the result, but it just delays
fetch('https://randomuser.me/api/?results=500')
.then(response =>  response.json())
.then(resData => console.log(resData))

Upvotes: 2

Related Questions