从 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);

    });
  }, []);