[英]Fetch specific data from API ReactJS
我正在尝试从 API 中获取特定数据,例如:响应后我有那个 JSON:
{
"id": 5,
"url": "http://127.0.0.1:8000/api/article/5/",
"title": "Obama Offers Hopeful Vision While Nothing Nation's Fears",
"description": "Obama Offers Hopeful Vision While Nothing Nation's Fears",
"category": [
"http://127.0.0.1:8000/api/category/1/"
],
"image": "http://127.0.0.1:8000/media/article_image/news_01_3MT46Rk.jpg"
},
{
"id": 6,
"url": "http://127.0.0.1:8000/api/article/6/",
"title": "NASA Formalizes Efforts To Protect Earth From Asteroids",
"description": "Last week, NASA annouced a new program called the Planetary Defense Coordination Office (PDCO) which will coordinate NASA's efforts for detecting and tracking near-Earth objects (NEOs), If a large object comes hurting toward our planet...",
"category": [
"http://127.0.0.1:8000/api/category/4/"
],
"image": "http://127.0.0.1:8000/media/article_image/news_03_EOUms51.jpg"
},
{
"id": 7,
"url": "http://127.0.0.1:8000/api/article/7/",
"title": "Didi Kuaidi, The Company Beating Uber In China, Opens Its API To Third Party Apps",
"description": "One day after Uber updated its API to add 'content experiences' for passengers, the U.S company's biggest rival - Didi Kuadii in China - has opened its own platform up by releasing an SDK for developoers and third-parties",
"category": [
"http://127.0.0.1:8000/api/category/3/"
],
"image": "http://127.0.0.1:8000/media/article_image/news_02_l5zY4HJ.jpg"
}
在那个 API 中,我有一个按类别调用的孩子:
{
"id": 1,
"url": "http://127.0.0.1:8000/api/category/1/",
"name": "POLITICS"
},
{
"id": 2,
"url": "http://127.0.0.1:8000/api/category/2/",
"name": "BUSINESS"
},
{
"id": 3,
"url": "http://127.0.0.1:8000/api/category/3/",
"name": "TECH"
},
{
"id": 4,
"url": "http://127.0.0.1:8000/api/category/4/",
"name": "SCIENCE"
},
{
"id": 5,
"url": "http://127.0.0.1:8000/api/category/5/",
"name": "SPORTS"
}
我想要做的是用 POLITICS 类别呈现我的文章,但我不知道该怎么做,这是我到目前为止所做的。
获取json的方法:
getItems() {
this.setState({ 'isLoading': true });
fetch('http://127.0.0.1:8000/api/article/')
.then(results => {
if (results.ok) {
return results.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(results => this.setState({ 'items': results, 'isLoading': false }))
.catch(error => this.setState({ error, isLoading: false }));
}
我的渲染方法:
render() {
const { isLoading, error } = this.state;
if (error) {
return <p>{error.message}</p>;
}
if (isLoading) {
return <p>Loading ...</p>;
}
return (
<ul>
{this.state.items.map(function (item, index) {
console.log(item.category.indexOf("1") != 01)
if (item.category === 1){
return <ContentItem item={item} key={index} />
}
})}
</ul>
);
}
编辑:渲染中 console.log(item) 的输出:
{id: 5, title: "Obama Offers Hopeful Vision While Nothing Nation's Fears", description: "Obama Offers Hopeful Vision While Nothing Nation's Fears", category: Array(1), image: "http://127.0.0.1:8000/media/article_image/news_01_3MT46Rk.jpg"}
category: Array(1)
0: 1
length: 1
__proto__: Array(0)
description: "Obama Offers Hopeful Vision While Nothing Nation's Fears"
id: 5
image: "http://127.0.0.1:8000/media/article_image/news_01_3MT46Rk.jpg"
title: "Obama Offers Hopeful Vision While Nothing Nation's Fears"
__proto__: Object
你没有做的是按id过滤,
if (item.category === 1){ //You need to add .id here
return <ContentItem item={item} key={index} />
}
像这样:
if (item.category.id === 1){ //.id
return <ContentItem item={item} key={index} />
}
您做错的是您正在根据=== 1
条件检查整个对象,而不仅仅是对象的属性id
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.