时间戳

首页 > 解决方案 > 从 API ReactJS 获取特定数据

javascript - 从 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"
}

我想做的是用政治类别呈现我的文章，但我不知道该怎么做，这是我到目前为止所做的。

获取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

标签： javascriptjsonreactjsfetchrender

解决方案

你没有做的是按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对象的属性。

推荐阅读