React js fetch API

Question

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

Solution

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

Comments

[Quentin]

That's a response header, not a request header.

[Jeeva]

@mare, remove the mode from your fetch request and then try it, i have updated the code, run the snippet above to double check it, it will take some time to load the results

[mare]

@Jeeva hey, thanks a lot for your effort but I am still geting this error prntscr.com/k39k5x ...results are undefined. Where should I define results? Sorry for bothering you, but I am new at all this

[Jeeva]

Are you telling about this error prntscr.com/k3821t

[Jeeva]

do your logic in the above code where i put the console, may be i will update it with comment in my answer.

[Jeeva]

I have updated my answer. kindly check it and let me know if any

[mare]

@Jeeva hey, looks like that fix that error... But now, I got this in console prntscr.com/k3a15k and this is how my code look right now componentDidMount() { fetch('https://randomuser.me/api/?results=500') .then(response => response.json()) .then(resData => { let person = (resData.results || []).map((pic) => { return( <div key={pic.results}></div> ) }) this.setState({person: person}); }) }

[Jeeva]

yes it may result in error, because you need to set the unique key. since we already got the array of object results from resData. So only you are iterating using map. updated my answer with the json response that you were getting. you just make your id as your unique key

[mare]

now it is telling me that my render method should have return statement, but it do. Why is so hard to fetch API :(

[Jeeva]

Sorry its my mistake, i wrote the render method without return in it, i have updated it now