如何在 ReactJS 挂钩中映射数据？答案

【问题标题】：how to map data in ReactJS hooks?如何在 ReactJS 挂钩中映射数据？
【发布时间】：2021-01-09 10:29:04
【问题描述】：

我想通过 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;

【问题讨论】：

标签： reactjs api react-hooks jsx

【解决方案1】：

这个端点返回的是对象而不是数组，所以你应该稍微修改一下 Object.values(data.collection.types).map(collection => { .... })

【讨论】：

【解决方案2】：

此代码可能有效：

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;
        setCollectionList(Object.values(data).map(item=>        ({title:item.title,iconicShape:item.iconicShape})))
    })        


    console.log(CollectionIcons);
})

return(
    <div>
        <ModalSubHeader>What type of collection or event would you like to be reminded                                 
              about?</ModalSubHeader>
        <CollectionHolder>
            {collectionList.map((number) =>
            <CollectionOption>
                    <CollectionOptionInner>
                    <CollectionIcon src={CollectionIcons[number.iconicShape]} />
                    {number.title}
                </CollectionOptionInner>
            </CollectionOption>
        )}
        </CollectionHolder>
    </div>
)
}

export default Collection;

【讨论】：