API 返回对象答案

【问题标题】：API returns ObjectAPI 返回对象
【发布时间】：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

【问题讨论】：

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

标签： javascript arrays reactjs api

【解决方案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>

【讨论】：