javascript - 数据获取正常，但为什么不显示？

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