在 React 中有条件地显示按钮

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


问题:


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


代码:


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 语句,但我不确定我将如何开始编写它。有人有任何意见吗?


幕布斯7119047
浏览 200回答 2
2回答

慕村225694

您应该有一个名为 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,则该按钮将不会显示

四季花海

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

相关分类

JavaScript