javascript - 数据正在正确获取,但为什么不显示?
问题描述
我正在使用反应挂钩来获取 api 并显示 NBA 球员的名字和姓氏列表。获取 API 是成功的,因为它可以显示在日志中,但它不显示名称。
我使用的免费 API:https ://www.balldontlie.io/
//react 组件获取和显示数据
import { useCallback, useEffect, useState } from "react";
function App() {
const [data, setData] = useState([]);
const refreshData = useCallback(() => {
fetch("https://www.balldontlie.io/api/v1/players")
.then((res) => res.json())
.then((data) => {
setData(data);
console.log(data);
});
}, []);
useEffect(() => {
refreshData();
}, []);
return (
<div>
<h1>My player</h1>
<ul>
{Object.values(data).map((item) => (
<li key={item.id}>
{item.first_name} {item.last_name}
</li>
))}
</ul>
</div>
);
}
export default App;
解决方案
问题
data
是具有两个键的对象和data
,meta
它们都不是具有名字和姓氏属性的玩家的对象。
// 20211018232429
// https://www.balldontlie.io/api/v1/players
{
"data": [
{
"id": 14,
"first_name": "Ike",
...
"last_name": "Anigbogu",
...
},
...
{
"id": 497,
"first_name": "Michael",
...
"last_name": "Ansley",
...
}
],
"meta": {
....
}
}
解决方案
您想要映射作为data
玩家对象数组的属性。
function App() {
const [data, setData] = useState([]);
const refreshData = useCallback(() => {
fetch("https://www.balldontlie.io/api/v1/players")
.then((res) => res.json())
.then((data) => {
setData(data.data); // <-- save data.data array
});
}, []);
useEffect(() => {
refreshData();
}, [refreshData]);
return (
<div>
<h1>My player</h1>
<ul>
{data.map((item) => ( // <-- map data array
<li key={item.id}>
{item.first_name} {item.last_name}
</li>
))}
</ul>
</div>
);
}
function App() {
const [data, setData] = React.useState([]);
const refreshData = React.useCallback(() => {
fetch("https://www.balldontlie.io/api/v1/players")
.then((res) => res.json())
.then((data) => {
setData(data.data);
});
}, []);
React.useEffect(() => {
refreshData();
}, [refreshData]);
return (
<div>
<h1>My player</h1>
<ul>
{data.map((item) => (
<li key={item.id}>
{item.first_name} {item.last_name}
</li>
))}
</ul>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<App />,
rootElement
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />
推荐阅读
- javascript - 当使用命令请求时,如何获取一个简单的纯文本页面以输出到 Discord?
- javascript - 如何让赛普拉斯返回自定义错误或消息
- haskell - 在 Haskell 中调用状态单子“堆栈”上的函数
- nativescript - 将 Css 类添加到 nativescript-vue 中的按钮点击
- pip - 如何组织我的 python 模块和包
- reactjs - 如何使用 JSX 创建的 SVG 元素作为 Canvas 中的图像源?
- scala - 如何从列中存储值的范围并计算有多少值落入scala中的每个间隔?
- apache-kafka - kafka 代理中处于 CLOSE WAIT 状态的 TCP 端口过多
- python - 如何在 Python 中精确采样传感器信号
- javascript - 如何按关键日期对对象进行排序?