时间戳

首页 > 解决方案 > 如何在 ReactJS 挂钩中映射数据？

reactjs - 如何在 ReactJS 挂钩中映射数据？

问题描述

我想通过 API 收集 JSON 数据并将其呈现为 JSX 以显示，但我是反应钩子的新手，我看到一个错误，说 data.map 不是函数有人可以帮助我吗？

这是我的代码

import React, {useState, useEffect} from "react";
import axios from "axios";
import ModalSubHeader from "../../styles/ModalSubHeader";
import CollectionHolder from "../../styles/CollectionHolder";
import {CollectionOption, CollectionOptionInner} from "../../styles/CollectionOption";
import CollectionIcon from "../../styles/CollectionIcon";
import CollectionIcons from "../../../../images/index";

function Collection(props) {

const [collectionList, setCollectionList] = useState(null);
useEffect(() => {
    axios
    .get("https://reg.my-waste.mobi/collections?project_id=556&district_id=556&zone_id=zone-z1250-z1261")
    .then(({data}) => {
        data = data.collection.types;
        const collections = data.map((number) =>
            <CollectionOption>
                <CollectionOptionInner>
                    <CollectionIcon src={CollectionIcons[number.iconicShape]} />
                    {number.title}
                </CollectionOptionInner>
            </CollectionOption>
        );

        setCollectionList(collections)
    })        

    
    console.log(CollectionIcons);
})

return(
    <div>
        <ModalSubHeader>What type of collection or event would you like to be reminded about?</ModalSubHeader>
        <CollectionHolder>
            {collectionList}
        </CollectionHolder>
    </div>
)
}

export default Collection;

标签： reactjsapireact-hooksjsx

解决方案

此端点返回对象而不是数组，因此您应该对其进行一些修改 Object.values(data.collection.types).map(collection => { .... })

推荐阅读