Question

146

React js fetch API

rated 0 times [ 153] [ 7] / answers: 1 / hits: 23038 / 6 Years ago, fri, july 6, 2018, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

casandra

Add To Favorites

Follow

Total Points: 334

Total Questions: 93

Total Answers: 104

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

casandra questions

1 Difference forRoot and forFeature [Nest JS]

Thu, Feb 25, 21, 00:00, 3 Years ago

1 How to align Material-UI Menu items?

Mon, Jul 6, 20, 00:00, 4 Years ago

1 [GraphQL error]: Message: Unknown fragment

Thu, May 21, 20, 00:00, 4 Years ago

1 onChange handler for Object.keys().map in React to update object properties

Tue, Nov 19, 19, 00:00, 5 Years ago

1 pwa - prompt add to home screen dosen't show

Tue, Sep 17, 19, 00:00, 5 Years ago

View All

answered 6 Years ago santana · Accepted Answer

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