使用Dev.to API仅显示最近30篇文章，寻求技术解决方案

Dev.to公开API默认采用分页机制，单次请求最多返回30条数据（per_page默认值为30）。你之前的原生JS代码可能已经实现了分页逻辑来获取所有文章，但迁移到React时未同步该逻辑，因此现在仅能拿到第一页的30篇文章。

通过循环请求分页数据，直到API返回空数组（表示没有更多内容），同时将per_page设为API允许的最大值100以减少请求次数。修改后的代码如下：

useEffect(() => {
  async function fetchArticles() {
    let allArticles = [];
    let currentPage = 1;
    const itemsPerPage = 100; // Dev.to API允许的最大单页数量
    let hasMoreArticles = true;

    while (hasMoreArticles) {
      try {
        const response = await fetch(
          `https://dev.to/api/articles?username=mursalfk&page=${currentPage}&per_page=${itemsPerPage}`
        );
        
        if (!response.ok) {
          throw new Error(`请求失败，状态码：${response.status}`);
        }

        const pageData = await response.json();
        
        // 若当前页无数据，终止循环
        if (pageData.length === 0) {
          hasMoreArticles = false;
          break;
        }

        // 处理当前页的文章数据
        const processedArticles = pageData.map(article => ({
          title: article.title,
          description: article.description,
          url: article.url,
          image: article.social_image,
          date: article.published_at,
          tags: article.tag_list,
        }));

        allArticles = [...allArticles, ...processedArticles];
        currentPage++;
      } catch (error) {
        console.error('获取文章列表出错:', error);
        hasMoreArticles = false;
      }
    }

    // 一次性更新状态，避免多次setState触发重渲染
    setWriteUps(allArticles);
  }

  fetchArticles();
}, []);

• 分页参数控制：使用page参数逐页请求，per_page设为100减少总请求次数
• 批量状态更新：先收集所有处理后的文章数据，再一次性调用setWriteUps，避免频繁状态更新导致的不必要重渲染
• 错误处理：添加请求错误捕获，避免单个分页请求失败导致整个流程中断
• 终止条件：当API返回空数组时，判定为无更多文章，终止循环

内容的提问来源于stack exchange，提问作者Mursal Furqan