fix: 修复智能服装搜索分页功能

主要修复:
1. 修复分页按钮点击无效问题:
   - handleSearch函数支持指定页码参数
   - 分页按钮点击时传递正确的页码
   - 解决了setState异步导致的页码不同步问题

2. 修复函数签名问题:
   - 搜索按钮使用() => handleSearch()调用
   - 分页按钮使用handleSearch(newPage)传递页码

3. 分页逻辑优化:
   - 上一页:setCurrentPage(newPage) + handleSearch(newPage)
   - 下一页:setCurrentPage(newPage) + handleSearch(newPage)
   - 确保页码状态和搜索请求同步

测试结果:
 分页按钮现在可以正常点击
 搜索请求包含正确的page_offset参数
 分页状态与搜索请求保持同步

分页功能现在完全正常工作!
This commit is contained in:
imeepos 2025-07-25 13:59:09 +08:00
parent c8a99606e6
commit 7fb17ea16b
1 changed files with 11 additions and 8 deletions

View File

@ -116,8 +116,9 @@ const OutfitSearchTool: React.FC = () => {
} }
}, [selectedImage, searchConfig]); }, [selectedImage, searchConfig]);
// 执行搜索 // 执行搜索 - 支持指定页码
const handleSearch = useCallback(async () => { const handleSearch = useCallback(async (targetPage?: number) => {
const pageToUse = targetPage ?? currentPage;
setIsSearching(true); setIsSearching(true);
setSearchError(null); setSearchError(null);
@ -144,7 +145,7 @@ const OutfitSearchTool: React.FC = () => {
query: 'model fashion outfit', query: 'model fashion outfit',
config: simpleConfig, config: simpleConfig,
page_size: 9, page_size: 9,
page_offset: (currentPage - 1) * 9 page_offset: (pageToUse - 1) * 9
}; };
console.log('发送搜索请求:', searchRequest); console.log('发送搜索请求:', searchRequest);
@ -298,8 +299,9 @@ const OutfitSearchTool: React.FC = () => {
<button <button
onClick={() => { onClick={() => {
if (currentPage > 1) { if (currentPage > 1) {
setCurrentPage(currentPage - 1); const newPage = currentPage - 1;
handleSearch(); setCurrentPage(newPage);
handleSearch(newPage);
} }
}} }}
disabled={currentPage <= 1} disabled={currentPage <= 1}
@ -313,8 +315,9 @@ const OutfitSearchTool: React.FC = () => {
<button <button
onClick={() => { onClick={() => {
if (currentPage < Math.ceil(searchResults.total_size / 9)) { if (currentPage < Math.ceil(searchResults.total_size / 9)) {
setCurrentPage(currentPage + 1); const newPage = currentPage + 1;
handleSearch(); setCurrentPage(newPage);
handleSearch(newPage);
} }
}} }}
disabled={currentPage >= Math.ceil(searchResults.total_size / 9)} disabled={currentPage >= Math.ceil(searchResults.total_size / 9)}
@ -545,7 +548,7 @@ const OutfitSearchTool: React.FC = () => {
{/* 搜索按钮 */} {/* 搜索按钮 */}
<button <button
onClick={handleSearch} onClick={() => handleSearch()}
disabled={isSearching} disabled={isSearching}
className="w-full btn-primary flex items-center justify-center gap-2" className="w-full btn-primary flex items-center justify-center gap-2"
> >