首页 文章

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

提问于
浏览
0

我正在学习反应,偶然发现了一些似乎绝对是初学者的问题 . 无论如何,我从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上没有 .

请帮帮我 . 谢谢

1 回答

  • 0

    this.state.data.map 遍历数组 . 由于 this.state.data 是一个对象,请直接使用它,如下所示:

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

相关问题