javascript React js 获取 API
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51204735/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React js fetch API
提问by mare
I am learning React.js and trying to fetch API like this
我正在学习 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>
);
}
and this is the error I get
这是我得到的错误
I am pretty new in this, so if anyone can help me with this that would be great. Thanks
我在这方面很新，所以如果有人可以帮助我，那就太好了。谢谢
采纳答案by Jeeva
Try by setting the header as follows. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORSYou just remove the mode: 'no-cors'in your code,
尝试如下设置标题。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": "[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))回答by duc mai
Change mode to cors will solve your problem I guess.
我想将模式更改为 cors 将解决您的问题。
fetch('https://randomuser.me/api/?results=500', {mode: 'cors'})
