数据是抓取正确，但为什么不显示?

Question

我使用react hooks来获取api并显示NBA球员的名字和姓氏列表。获取API是成功的，因为它可以在日志中显示，但它不显示名称。
我使用的免费API:https://www.balldontlie.io/

//反应组件获取和显示数据

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;

Answer 1

问题

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" />

Answer 2

您没有使用实际值更新状态。将对象传递到状态。下面是访问这些值需要传递的内容:

const refreshData = useCallback(() => {
fetch("https://www.balldontlie.io/api/v1/players")
.then((res) => res.json())
.then((data) => {
setData(data.data);
console.log(data);
});
}, []);