反应js抓取API

问题描述

我正在学习React.js，并尝试像这样获取API

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

这是我收到的错误

http://prntscr.com/k36ggq

我在这方面还是个新手，所以如果有人能帮我解决这个问题，那就太好了。谢谢

推荐答案

尝试按如下方式设置标头。https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS 您只需删除代码中的模式：‘no-cors’

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ørgensen@example.com",
            "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))