React 表格​​加载但在点击分页链接时消失

问题描述

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

Basket.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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）