如何解决试图通过 axios 获取 API,但不知道如何访问
我尝试从 API 获取一些数据。 API 的格式如下:
[
{
"1": {
"appid": 1,"name": "bmw"
},"2": {
"appid": 2,"name": "mercedes"
},"3": {
"appid": 3,"name": "tesla"
}
}
]
然后我的 app.js 看起来像这样:
import React,{ useState,useEffect } from "react";
import axios from "axios";
import ItemsGrid from "./components/items/ItemsGrid";
function App() {
const [items,setItems] = useState([]);
const [isLoading,setIsLoading] = useState(true);
useEffect(() => {
const fetchItems = async () => {
const result = await axios({
url: "http://localhost:3013/items",method: "get",timeout: 8000,headers: {
"Content-Type": "application/json",},});
console.log(result.data);
setItems(result.data);
setIsLoading(false);
};
fetchItems();
},[]);
return (
<div className="App">
<ItemsGrid isLoading={isLoading} items={items} />
<h1>Hello</h1>
</div>
);
}
export default App;
和 ItemsGrid:
import React from "react";
const ItemsGrid = ({ items,isLoading }) => {
return isLoading ? (
<h1>Loading...</h1>
) : (
<div>
{items.map((item) => (
<h1 key={item.appid}>{item.name}</h1>
))}
</div>
);
};
export default ItemsGrid;
所以没什么可看的,因为我不知道如何访问数组。在控制台日志中,我看到了一些东西:
[{…}]
0: {1: {…},2: {…},3: {…}}
length: 1
__proto__: Array(0)
有人知道如何通过映射显示名称吗?
解决方法
如果要将带有对象的数组转换为常规数组,可以在数组的第一个元素上使用 Object.values:
&#x
,
设置项目时,您可以使用 Object#values
函数获取返回数据的第一个元素的所有值。
const fetchItems = async () => {
...
setItems(Object.values(result.data[0]));
...
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。