第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在 React 中有條件地顯示按鈕

在 React 中有條件地顯示按鈕

幕布斯7119047 2023-03-03 13:09:54
我有一個(gè)組件可以對(duì)博客文章執(zhí)行分頁(yè)功能。每次單擊“加載更多”按鈕時(shí),頁(yè)面底部都會(huì)加載另外五個(gè)帖子。不過,我現(xiàn)在對(duì)如何解決問題一無所知。問題:?jiǎn)螕簟凹虞d更多”按鈕并且所有可用帖子都可見后,“加載更多”按鈕應(yīng)該消失。代碼: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]);      });  }假設(shè)最多有 3 頁(yè)的帖子,一次查看 5 個(gè) - 所以總共 15 個(gè)帖子......一旦所有 3 頁(yè)都可見,我再次點(diǎn)擊“加載更多”(即使沒有更多帖子可用) ,我收到一個(gè)控制臺(tái)錯(cuò)誤... my api... GET /wp/v2/posts?categories=78&per_page=5&page=4 400 (Bad Request),這顯然意味著沒有要獲取的第 4 頁(yè),因?yàn)闆]有更多帖子。我認(rèn)為這需要一個(gè) if 語(yǔ)句,但我不確定我將如何開始編寫它。有人有任何意見嗎?
查看完整描述

2 回答

?
慕村225694

TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊

您應(yīng)該有一個(gè)名為 totalPages 的變量,它保存頁(yè)數(shù),然后比較 totalPages 和頁(yè)面狀態(tài),類似這樣:

{page <= totalPages && <button onClick={() => { setPage(page + 1); }}>Load more</button>}

在這種情況下,如果 page 為 3 且 totalPages 為 4,則該按鈕將不會(huì)顯示


查看完整回答
反對(duì) 回復(fù) 2023-03-03
?
四季花海

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊

嘗試一個(gè)名為“react-paginate”的 npm 包,有了它你可以輕松實(shí)現(xiàn)分頁(yè)邏輯而不會(huì)弄亂代碼,這里是這個(gè)包的鏈接https://www.npmjs.com/package/react-paginate 只需閱讀文檔,您就可以弄清楚如何執(zhí)行此操作,但如果您遇到任何問題,請(qǐng)不要猶豫,盡管問我。



查看完整回答
反對(duì) 回復(fù) 2023-03-03
  • 2 回答
  • 0 關(guān)注
  • 240 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)