在 React 中有条件地显示按钮

Question

我有一个组件可以对博客文章执行分页功能。每次单击“加载更多”按钮时，页面底部都会加载另外五个帖子。不过，我现在对如何解决问题一无所知。

问题：

单击“加载更多”按钮并且所有可用帖子都可见后，“加载更多”按钮应该消失。

代码：

const Posts = ({ state }) => {

  const [categories, setCategories] = useState([]);

  const [categoryId, setCategoryId] = useState();

  const [page, setPage] = useState(1);

  const [posts, setPosts] = useState([]); // Posts for each category

  const [allPosts, setAllPosts] = useState([]); // All posts from all categories

  // Get all of the available categories

  useEffect(() => {

    fetch(state.source.api + "/wp/v2/categories")

      .then(response => response.json())

      .then(data => {

        setCategories(data);

      })

  }, []);

  useEffect(() => {

    if (categoryId) {

      fetch(state.source.api + "/wp/v2/posts?categories=" + categoryId + "&per_page=5")

        .then((response) => response.json())

        .then((data) => {

          setPosts(data);

        });

    }

  }, [categoryId]);

  // Get posts for each category

  useEffect(() => {

    if (!categoryId) {

      return;

    }

    let url = state.source.api + "/wp/v2/posts?categories=" + categoryId + "&per_page=5";

    if (page > 1) {

      url += `&page=${page}`;

    }

    fetch(url)

      .then((response) => response.json())

      .then((data) => {

        setPosts([...posts, ...data]);

      });

  }, [categoryId, page]);

  useEffect(() => {

    let url = state.source.api + "/wp/v2/posts?per_page=5";

    if (page > 1) {

      url += `&page=${page}`;

    }

    fetch(url)

      .then((response) => response.json())

      .then((data) => {

        setAllPosts([...allPosts, ...data]);

      });

  }

假设最多有 3 页的帖子，一次查看 5 个 - 所以总共 15 个帖子......一旦所有 3 页都可见，我再次点击“加载更多”（即使没有更多帖子可用） ，我收到一个控制台错误... my api... GET /wp/v2/posts?categories=78&per_page=5&page=4 400 (Bad Request)，这显然意味着没有要获取的第 4 页，因为没有更多帖子。

我认为这需要一个 if 语句，但我不确定我将如何开始编写它。有人有任何意见吗？

Answer 1

您应该有一个名为 totalPages 的变量，它保存页数，然后比较 totalPages 和页面状态，类似这样：{page&nbsp;<=&nbsp;totalPages&nbsp;&&&nbsp;<button&nbsp;onClick={()&nbsp;=>&nbsp;{&nbsp;setPage(page&nbsp;+&nbsp;1);&nbsp;}}>Load&nbsp;more</button>}在这种情况下，如果 page 为 3 且 totalPages 为 4，则该按钮将不会显示

Answer 2

尝试一个名为“react-paginate”的 npm 包，有了它你可以轻松实现分页逻辑而不会弄乱代码，这里是这个包的链接https://www.npmjs.com/package/react-paginate&nbsp;只需阅读文档，您就可以弄清楚如何执行此操作，但如果您遇到任何问题，请不要犹豫，尽管问我。