时间戳

首页 > 解决方案 > 使用 reactjs 从 API 获取数据后访问数据组

reactjs - 使用 reactjs 从 API 获取数据后访问数据组

问题描述

我正在学习反应并偶然发现了一些似乎绝对是初学者的问题。无论如何，我正在从 API 获取数据，并且想知道如何从 JSON 中获取某个元素。我尝试了 [0] 的不同变体，但没有成功。

这是.json：

{
"data": [
    {
        "id": 68,
        "name": "Umrah bersama Da'i Hadhari",
        "duration": "12D10N",
        "slug": "umrah-bersama-dai-hadhari-november-disember",
        "type": "umrah",
        "isPublished": true,
        "isHighlighted": true,
        "promoStatus": null,
        "tourCode": null,
        "displayName": "Umrah bersama Da'i Hadhari",
    },
    {
        "id": 70,
        "name": "Umrah bersama Da'i Fuad",
        "duration": "12D10N",
        "slug": "umrah-bersama-dai-fuad-2018",
        "type": "umrah",
        "isPublished": true,
        "isHighlighted": true,
        "promoStatus": null,
        "tourCode": "UGOCT18-ECON",
        "displayName": "Umrah bersama Da'i Fuad",
    },
    {
        "id": 45,
        "name": "Umrah Super Ekonomi - Disember",
        "duration": "12D10N",
        "slug": "ugdec18-umrah-disember-cuti-sekolah",
        "type": "umrah",
        "isPublished": true,
        "isHighlighted": true,
        "promoStatus": null,
        "tourCode": "UGOCT18 - P/FB",
        "displayName": "Umrah Super Ekonomi - Disember",
    },
    {
        "id": 47,
        "name": "Umrah Super Ekonomi - November",
        "duration": "12D10N",
        "slug": "ugnov18-p-fb-umrah-november-cuti-sekolah-musim-sejuk",
        "type": "umrah",
        "isPublished": true,
        "isHighlighted": true,
        "promoStatus": null,
        "tourCode": "UGNOV18 - S.ECON",
        "displayName": "Umrah Super Ekonomi - November",
    },
]

}

这是我的代码：

class PackageDetails extends React.Component {

    constructor (props) {
        super (props);
        this.state = {
            data: [],
        }
    }

    componentDidMount () {
        fetch ('http://localhost/sampleData.json')
        .then ((Response) => Response.json())
        .then ((findresponse) => {
            console.log(findresponse.data[0])
            this.setState({
                data:findresponse.data[0],
            })
        })
    }

    render () {
        return (
            <div>
                <Navigation/>
                <Breedcrumbs/>

                <section className="section-highlight">
                    <div className="container">
                        {
                            this.state.data.map((dynamicData,i) =>
                                <ContentHighlight
                                    name={dynamicData.name}
                                    packageType={dynamicData.packageType}
                                    highlight={dynamicData.highlight}
                                />
                            )
                        }

                    </div>
                </section>

            </div>
        )
    }

}

export default PackageDetails;

我只想访问第一组数据。它适用于console.log，但不适用于this.setState。

请帮助我。谢谢

标签： reactjs

解决方案

this.state.data.map遍历一个数组。既然this.state.data是一个对象，请像这样直接使用它：

<ContentHighlight
  name={this.state.data.name}
  packageType={this.state.data.packageType}
  highlight={this.state.data.highlight}
/>

推荐阅读