0

我是 React 新手，正在尝试开发我的第一个 Web 应用程序。我想要实现的是非常基本的。我正在尝试从 API 获取一些数据并将其显示在表格中。我正在尝试向表添加分页，以便所有记录都不会显示在同一屏幕上。我已经添加了页码，但是当我单击任何页码链接时，表格中的正确数据会被加载，但表格会立即消失。我不知道为什么会这样。下面是我的代码：

篮子.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import Posts from "../Posts";
import Pagination from "../Pagination";

const Basket = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(10);

  useEffect(() => {
    const fetchPosts = async () => {
      setLoading(true);
      const res = await axios.get("http://192.168.29.135:8000/aysle/baskets/");
      setPosts(res.data);
      setLoading(false);
    };
    fetchPosts();
  }, []);
  //Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

  //Change Page
  const paginate = (pageNumber) => setCurrentPage(pageNumber);

  //console.log(posts);
  return (
    <div>
      <Posts posts={currentPosts} loading={loading} />
      <Pagination
        postsPerPage={postsPerPage}
        totalPosts={posts.length}
        paginate={paginate}
      />
    </div>
  );
};

export default Basket;

要以表格形式显示数据，请使用以下代码：Posts.js：

import React from "react";
import edit from "../images/edit.png";
import del from "../images/delete.png";
import "./Basket/basket.scss";

const Posts = ({ posts, loading }) => {
  if (loading) {
    return <h2>Loading All Baskets....</h2>;
  }
  return (
    <table className="basket-view">
      <thead>
        <tr id="Baskettr">
          <th id="Basketth" colSpan="4">
            Here are your Listings...
          </th>
        </tr>
        <tr id="Baskettr">
          {/* <th id="Basketth">Id</th> */}
          <th id="Basketth">Basket Name</th>
          <th id="Basketth">Basket Creation Date</th>
          <th id="Basketth">Basket Modified Date</th>
          <th id="Basketth">Action</th>
        </tr>
      </thead>
      <tbody id="Baskettbody">
        {posts ? (
          posts.length > 0 ? (
            posts.map((post, index) => {
              return (
                <tr id="Baskettr" key={index}>
                  {/* <td id="Baskettd">{basket.id}</td> */}
                  <td id="Baskettd">{post.basket_name}</td>
                  <td id="Baskettd">{post.basket_creation_date}</td>
                  <td id="Baskettd">{post.basket_modified_date}</td>
                  <td>
                    <button id="delBtn" title="Edit">
                      <img src={edit} id="BtnImg" alt="Edit" />
                    </button>
                    <button id="editBtn" title="Delete">
                      <img src={del} id="BtnImg" alt="Delete" />
                    </button>
                  </td>
                </tr>
              );
            })
          ) : (
            <tr id="Baskettr">
              <td id="Baskettd">No Records to Show...</td>
            </tr>
          )
        ) : (
          0
        )}
      </tbody>
    </table>
  );
};

export default Posts;

最后，对于分页，我使用以下代码：

import React from "react";

const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
  const pageNumbers = [];
  //console.log(totalPosts);
  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }
  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.map((number) => (
          <li key={number} className="page-item">
            <a onClick={() => paginate(number)} href="!#" className="page-link">
              {number}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Pagination;

请帮我纠正这个问题。非常感谢您提前抽出时间。这是CodeSandBoxLink

4

1 回答 1

0

这都是因为标签中的 href 属性“！#”。因此，会转换到新页面并再次获取所有数据。

您可以使用<button/>而不是<a/>使用 css 来设置它的样式。例子

于 2021-10-29T12:16:10.080 回答