diff --git a/Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.tsx b/Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.tsx index 6ba96274..e1475cdc 100644 --- a/Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.tsx +++ b/Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.tsx @@ -65,8 +65,6 @@ const TwoColumnSelection: React.FC = ({ ); const [searchQuery, setSearchQuery] = useState(""); const [isLoading, setIsLoading] = useState(false); - const [currentPage, setCurrentPage] = useState(1); - const [totalPages, setTotalPages] = useState(1); // 使用 useMemo 缓存过滤结果,避免每次渲染都重新计算 const filteredFriends = useMemo(() => { @@ -83,17 +81,8 @@ const TwoColumnSelection: React.FC = ({ ); }, [dataSource, rawFriends, searchQuery]); - // 分页显示好友列表,避免一次性渲染太多项目 - const ITEMS_PER_PAGE = 50; - const [displayPage, setDisplayPage] = useState(1); - - const friends = useMemo(() => { - // 直接使用完整的过滤列表,不再进行本地分页 - // 因为我们已经在外部进行了分页加载 - return filteredFriends; - }, [filteredFriends]); - - const hasMoreFriends = filteredFriends.length > friends.length; + // 好友列表直接使用过滤后的结果 + const friends = filteredFriends; // 使用 useMemo 缓存选中状态映射,避免每次渲染都重新计算 const selectedFriendsMap = useMemo(() => { @@ -126,7 +115,6 @@ const TwoColumnSelection: React.FC = ({ if (response.success) { setRawFriends(response.data.list || []); - setTotalPages(Math.ceil((response.data.total || 0) / 20)); } else { setRawFriends([]); message.error(response.message || "获取好友列表失败"); @@ -146,7 +134,6 @@ const TwoColumnSelection: React.FC = ({ if (visible && !dataSource) { // 只有在没有外部数据源时才调用 API fetchFriends(1); - setCurrentPage(1); } }, [visible, dataSource, fetchFriends]); @@ -160,44 +147,18 @@ const TwoColumnSelection: React.FC = ({ }, [visible]); // 防抖搜索处理 - const handleSearch = useCallback(() => { - let timeoutId: NodeJS.Timeout; - return (value: string) => { - clearTimeout(timeoutId); - timeoutId = setTimeout(() => { - setDisplayPage(1); // 重置分页 - if (!dataSource) { - fetchFriends(1, value); - } - }, 300); - }; - }, [dataSource, fetchFriends])(); - - // API搜索处理(当没有外部数据源时) - const handleApiSearch = useCallback( - async (keyword: string) => { + const handleSearch = useCallback( + (value: string) => { if (!dataSource) { - await fetchFriends(1, keyword); + const timer = setTimeout(() => { + fetchFriends(1, value); + }, 300); + return () => clearTimeout(timer); } }, [dataSource, fetchFriends], ); - // 加载更多好友 - const handleLoadMore = useCallback(() => { - setDisplayPage(prev => prev + 1); - }, []); - - // 防抖搜索 - useEffect(() => { - if (!dataSource && searchQuery.trim()) { - const timer = setTimeout(() => { - handleApiSearch(searchQuery); - }, 300); - return () => clearTimeout(timer); - } - }, [searchQuery, dataSource, handleApiSearch]); - // 选择好友 - 使用 useCallback 优化性能 const handleSelectFriend = useCallback((friend: FriendSelectionItem) => { setSelectedFriends(prev => { @@ -223,10 +184,8 @@ const TwoColumnSelection: React.FC = ({ setSearchQuery(""); }, [selectedFriends, onConfirm]); - // 取消选择 - 使用 useCallback 优化性能 + // 取消选择 const handleCancel = useCallback(() => { - setSelectedFriends([]); - setSearchQuery(""); onCancel(); }, [onCancel]); @@ -255,8 +214,8 @@ const TwoColumnSelection: React.FC = ({ value={searchQuery} onChange={e => { const value = e.target.value; - setSearchQuery(value); // 立即更新显示 - handleSearch(value); // 防抖处理搜索 + setSearchQuery(value); + handleSearch(value); }} prefix={} allowClear @@ -290,11 +249,7 @@ const TwoColumnSelection: React.FC = ({ {/* 使用外部传入的加载更多 */} {hasMore && (
-