React项目中如何基于Google自定义搜索API实现分页功能？

核心逻辑 #

Google CSE API靠start参数控制分页位置：

• 每页默认返回10条结果，第一页start=1，第二页start=11，第三页start=21，以此类推（每次递增10）
• API返回的resultData.queries里，nextPage[0].startIndex就是下一页的start值，previousPage[0].startIndex是上一页的start值

具体实现步骤 #

1. 定义分页相关状态

在React组件里用useState管理关键分页数据：

const [currentStart, setCurrentStart] = useState(1); // 当前页的start参数
const [hasNextPage, setHasNextPage] = useState(false);
const [hasPreviousPage, setHasPreviousPage] = useState(false);
const [searchResults, setSearchResults] = useState([]);

2. 带分页参数请求API

发起请求时把currentStart作为参数传入接口：

const fetchSearchResults = async () => {
  const apiKey = '你的API_KEY';
  const cx = '你的搜索引擎ID';
  const query = '搜索关键词';
  
  try {
    const response = await fetch(
      `https://www.googleapis.com/customsearch/v1?key=${apiKey}&cx=${cx}&q=${query}&start=${currentStart}`
    );
    const resultData = await response.json();
    
    // 更新搜索结果
    setSearchResults(resultData.items || []);
    
    // 更新分页状态
    setHasNextPage(!!resultData.queries?.nextPage);
    setHasPreviousPage(!!resultData.queries?.previousPage);
  } catch (error) {
    console.error('搜索请求失败:', error);
  }
};

// currentStart变化时自动请求对应页面数据
useEffect(() => {
  fetchSearchResults();
}, [currentStart]);

3. 实现分页按钮交互

根据hasNextPage和hasPreviousPage控制按钮可用性，两种交互方式可选：

方式一：依赖API返回的startIndex（推荐，避免手动计算出错）

// 先把resultData存在状态里，方便获取分页参数
const [resultData, setResultData] = useState(null);

// 在fetchSearchResults里添加：setResultData(resultData);

const handlePreviousPage = () => {
  const prevStart = resultData.queries.previousPage[0].startIndex;
  setCurrentStart(prevStart);
};

const handleNextPage = () => {
  const nextStart = resultData.queries.nextPage[0].startIndex;
  setCurrentStart(nextStart);
};

// 按钮渲染
<div className="pagination">
  <button onClick={handlePreviousPage} disabled={!hasPreviousPage}>
    上一页
  </button>
  <span>当前显示第 {currentStart} - {currentStart + 9} 条</span>
  <button onClick={handleNextPage} disabled={!hasNextPage}>
    下一页
  </button>
</div>

方式二：手动计算start值（适合固定每页10条的场景）

<div className="pagination">
  <button 
    onClick={() => setCurrentStart(prev => prev - 10)} 
    disabled={!hasPreviousPage}
  >
    上一页
  </button>
  <span>当前显示第 {currentStart} - {currentStart + 9} 条</span>
  <button 
    onClick={() => setCurrentStart(prev => prev + 10)} 
    disabled={!hasNextPage}
  >
    下一页
  </button>
</div>

4. 边界情况处理

• 当currentStart为1时，previousPage不存在，上一页按钮必须禁用
• 当返回结果不足10条，或者已到达API上限（第100条）时，nextPage不存在，下一页按钮禁用
• 务必添加请求错误捕获，避免页面崩溃

内容的提问来源于stack exchange，提问作者mateo ghidini