API 返回对象

Posted 2023-02-22

【中文标题】API 返回对象

【英文标题】：API returns Object

【发布时间】：2021-02-02 21:45:49

【问题描述】：

我在使用 ReactJS 时尝试从 RIDB API 获取数据。我取回数据

function TryFetch() 
    const [camps, setCamps] = useState([]);
    
    

    useEffect(() => 
        axios.get(api)
            .then( res => 
                console.log(res)
                setCamps(res.data)
            )
            .catch(err => 
                console.log(err);
            )
    , [])

    return (

            <div>
                <ul>

                    camps && camps.RECDATA.map(post => (
                        <li key=post.CampsiteID>post.CampsiteID</li>

                    ))
                    
                    
                    
                </ul>   
            </div>


        )

API 调用返回的数据

RECDATA: [


    CampsiteID: "23480",
    FacilityID: "232732",
    CampsiteName: "25",
    CampsiteType: "STANDARD ELECTRIC"
,


    CampsiteID: "25550",
    FacilityID: "232732",
    CampsiteName: "35",
    CampsiteType: "STANDARD ELECTRIC"
,


    CampsiteID: "27520",
    FacilityID: "232732",
    CampsiteName: "27",
    CampsiteType: "STANDARD ELECTRIC"
 

]

如何循环访问 React 中的对象以显示各个营地信息？我不断收到 TypeError: Cannot read property 'map' of undefined

【问题讨论】：

这应该有助于***.com/q/41374572/7785337.. 您需要使用.map() 在 UI 中显示数组中的每个项目..

【参考方案1】：

您可以按如下方式使用它：

const data =  RECDATA: [

 CampsiteID: "23480", FacilityID: "232732", CampsiteName: "25", CampsiteType: "STANDARD ELECTRIC",

 CampsiteID: "25550", FacilityID: "232732", CampsiteName: "35", CampsiteType: "STANDARD ELECTRIC",

 CampsiteID: "27520", FacilityID: "232732", CampsiteName: "27", CampsiteType: "STANDARD ELECTRIC"

];

<ul>
   
      data && data.RECDATA.map(recordItem => 
          return <li>recordItem.CampsiteType</li>
      );
   
</ul>

【讨论】：

我已经尝试过您的解决方案，并且一直在尝试。 TypeError：无法读取未定义的属性“地图”

尝试记录data，检查是否有RECDATA作为数组字段

【参考方案2】：

很简单

你可以这样做

var apiData=RECDATA: [CampsiteID: "23480", FacilityID: "232732", CampsiteName: "25", CampsiteType: "STANDARD ELECTRIC", CampsiteID: "25550", FacilityID: "232732", CampsiteName: "35", CampsiteType: "STANDARD ELECTRIC", CampsiteID: "27520", FacilityID: "232732", CampsiteName: "27", CampsiteType: "STANDARD ELECTRIC"]

apiData.RECDATA.forEach(function(o)
   console.log(o.CampsiteID)
   console.log(o.CampsiteName)
)

In a React you can do something like below

 
  data.RECDATA.forEach(recordItem => 
      return <li>recordItem.CampsiteType</li>
   );
 

【讨论】：

在反应中我们只使用.map()来返回值并且不会使用forEach() ..因为，基本上map返回一个数组而forEach什么都不返回，

【参考方案3】：

const result =  RECDATA: [

 CampsiteID: "23480", FacilityID: "232732", CampsiteName: "25", CampsiteType: "STANDARD ELECTRIC",
 CampsiteID: "25550", FacilityID: "232732", CampsiteName: "35", CampsiteType: "STANDARD ELECTRIC", 
 CampsiteID: "27520", FacilityID: "232732", CampsiteName: "27", CampsiteType: "STANDARD ELECTRIC"
 
];

<ul>
   
      result && result.RECDATA.map((CampsiteType, index) =>
          <li key=`RECDATA_$index`>CampsiteType</li>
      );
   
</ul>