React JS中使用state实现分页功能无报错但不生效问题求助

以下是代码中存在的核心问题：

• useEffect使用不规范：首先不允许直接将async函数作为useEffect的入参，会导致React无法正确处理副作用的清理逻辑，易引发内存泄漏警告。其次useEffect的依赖数组为空，仅会在组件首次挂载时执行1次，后续page状态变更时不会重新触发接口请求，分页逻辑自然不会生效。
• setState方法误用：setPage是React提供的异步状态更新函数，没有返回值，你在拼接请求URL时直接使用page=${setPage(page+1)}的写法，会导致请求的page参数实际为undefined，后端无法返回对应分页的数据。
• 状态更新逻辑冗余且不安全：在nextPageHandler、prevPageHandler中你先后两次调用setPage，属于冗余操作。同时由于React状态更新是异步的，当前函数内捕获的page是当前渲染周期的旧值，直接基于旧值计算新页码，遇到连续快速点击时会出现分页计算错误。
• 缺少分页边界判断：未对页码的合法范围做限制，可能出现page小于1或者超过总页数的无效请求。

修正后的参考代码 #

const [article, setArticle] = useState([]);
const [page, setPage] = useState(1);
// 总页数可以根据接口返回的totalResults计算，NewsAPI返回的total字段就是总条数
const [totalResults, setTotalResults] = useState(0);
const PAGE_SIZE = 20;

// 封装通用请求方法
const fetchArticles = async (targetPage) => {
  try {
    const url = `https://newsapi.org/v2/top-headlines?q=house&from=2021-10-25&sortBy=publishedAt&apiKey=abc&page=${targetPage}&pageSize=${PAGE_SIZE}`;
    const res = await fetch(url);
    const parsedData = await res.json();
    setArticle(parsedData.articles);
    setTotalResults(parsedData.totalResults);
  } catch (err) {
    console.error('请求失败', err);
  }
};

useEffect(() => {
  // 在useEffect内部定义异步函数调用
  fetchArticles(page);
}, [page]); // 依赖page，页码变化自动重新请求

const nextPageHandler = () => {
  // 先判断是否到最后一页
  const maxPage = Math.ceil(totalResults / PAGE_SIZE);
  if (page < maxPage) {
    // 函数式更新保证拿到最新的页码值
    setPage(prev => prev + 1);
  }
};

const prevPageHandler = () => {
  if (page > 1) {
    setPage(prev => prev - 1);
  }
};

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