从 api 接收数据时遇到问题

Question

I am new to working with REACT and I am having trouble receiving data from my api. I am using postman to help me build this project, so I am hoping I used it correctly. The app will show up with my table and pagination but not the information from my selected api. I am thinking I need to have my api as an array but how would I go about making my api into an array to properly show my data? here is my code:

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

First of all, you always need to check the response body. In your case it'd be res.data.result to get the list, and it has other properties too, like the total length of records. After fixing that, you'll get the list, but your pagination logic has errors.

An advice is to remove the pagination logic, go step by step, so you can understand better what is happening. For example, the way you're doing your page size will always be 1 because you're not counting the total data length, you're couting the list length. So you'll need to use other properties of your response.data object.

Other point that might be useful about the pagination is that you don't really need to paginate on frontend, the api already has a page parameter (10 records per page, like your example). But if you want to create the pagination, you don't need lodash to do it, search for plain javascript solutions.

Answer 2

The posts resides in results in res.data so you need to set posts to res.data.results

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

    });
  }, []);