從 api 接收數據時遇到問題

Question

我是使用 REACT 的新手，我無法從我的 api 接收數據。 我正在使用郵遞員來幫助我構建這個項目，所以我希望我能正確使用它。 該應用程序將顯示我的表格和分頁，但不會顯示來自我選擇的 api 的信息。 我在想我需要將我的 api 作為一個數組，但是我將如何將我的 api 變成一個數組以正確顯示我的數據？ 這是我的代碼：

import axios from "axios";
import _ from "lodash"; //lookup lodash
import Table from "react-bootstrap/Table";

const pageSize = 10;
const Posts = () => {
  const [_posts, set_posts] = useState();
  const [paginatedPosts, setPaginatedPosts] = useState();
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    axios.get("https://swapi.dev/api/people/").then((res) => {
      console.log(res.data);
      set_posts(res.data);
      setPaginatedPosts(_(res.data).slice(0).take(pageSize).value());
    });
  }, []);

  const pageCount = _posts ? Math.ceil(_posts.length / pageSize) : 0;
  if (pageCount === 1) return null;
  const pages = _.range(1, pageCount + 1);

  function pagination(pageNo) {
    setCurrentPage(pageNo);
    const startIndex = (pageNo - 1) * pageSize;
    const paginatedPosts = _(_posts).slice(startIndex).take(pageSize).value();
    setPaginatedPosts(paginatedPosts);
  }

  return (
    <div>
      {!paginatedPosts ? (
        "No data found"
      ) : (
        <Table striped bordered hover className="project--table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Birth Year</th>
              <th>Height</th>
              <th>Mass</th>
              <th>Species</th>
              <th>Home World</th>
            </tr>
          </thead>
          <tbody>
            {paginatedPosts.map((_post, index) => (
              <tr key={index}>
                <td>{_post.name}</td>
                <td>{_post.birth_year}</td>
                <td>{_post.height}</td>
                <td>{_post.mass}</td>
                <td>{_post.species}</td>
                <td>{_post.home_world}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      )}
      <nav className="d-flex justify-content-center">
        <ul className="pagination">
          {pages.map((page) => (
            <li
              className={
                page === currentPage ? "page-item active" : "page-item"
              }
            >
              <p className="page-link" onClick={() => pagination(page)}>
                {page}
              </p>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

export default Posts;


The api I am using is the starwarsapi

Answer 1

首先，您總是需要檢查響應正文。 在您的情況下，獲取列表將是 res.data.result ，並且它也具有其他屬性，例如記錄的總長度。 修復后，您將獲得列表，但您的分頁邏輯有錯誤。

一個建議是刪除分頁邏輯，逐步進行，這樣您就可以更好地了解正在發生的事情。 例如，您處理頁面大小的方式將始終為 1，因為您沒有計算總數據長度，而是計算列表長度。 因此，您需要使用 response.data 對象的其他屬性。

對分頁可能有用的另一點是，您實際上並不需要在前端進行分頁，api 已經有一個頁面參數（每頁 10 條記錄，如您的示例）。 但是如果你想創建分頁，你不需要 lodash 來做，搜索普通的 javascript 解決方案。

Answer 2

帖子位於 res.data 中的結果中，因此您需要將帖子設置為 res.data.results

useEffect(() => {
    axios.get("https://swapi.dev/api/people/").then((res) => {
      console.log(res.data);
      set_posts(res.data.result);

    });
  }, []);