在 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 <= totalPages && <button onClick={() => { setPage(page + 1); }}>Load more</button>}

在这种情况下，如果 page 为 3 且 totalPages 为 4，则该按钮将不会显示

Answer 2

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