J'apprends React.js et j'essaie de récupérer une API comme celle-ci
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>
);
}
et c'est l'erreur que je reçois
Je suis assez nouveau dans ce domaine, alors si quelqu'un peut m'aider, ce serait formidable. Merci
Essayez en définissant l'en-tête comme suit. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS Vous venez de supprimer le mode: 'no-cors' dans votre 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))
Changer de mode pour résoudre votre problème, je suppose.
fetch('https://randomuser.me/api/?results=500', {mode: 'cors'})