Я пытаюсь получить некоторые данные из 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.info(result.data);
setItems(result.data);
setIsLoading(false);
};
fetchItems();
}, []);
return (
<div className = "App">
<ItemsGrid isLoading = {isLoading} items = {items} />
<h1>Hello</h1>
</div>
);
}
export default App;
И ItemGrid:
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 для первого элемента массива:
useEffect(() => {
const fetchItems = async () => {
const result = await axios({
url: "http://localhost:3013/items",
method: "get",
timeout: 8000,
headers: {
"Content-Type": "application/json",
},
});
setItems(Object.values(result.data[0]));
setIsLoading(false);
};
fetchItems();
}, []);
Когда вы устанавливаете элементы, вы можете использовать функцию Object#values
, чтобы получить все значения первого элемента ваших возвращаемых данных.
const fetchItems = async () => {
...
setItems(Object.values(result.data[0]));
...
};