React中使用react-paginated-list实现跨页用户过滤问题

你的问题核心是过滤时机错误：当前逻辑是先分页拿到当前页的10条数据，再在这10条里做过滤，自然找不到其他页的符合条件用户。正确逻辑应该是先对全量用户数据做过滤，再对过滤后的结果分页。

修改步骤 #

1. 在组件内部计算过滤后的完整用户列表，基于用户名和active状态的过滤条件
2. 将过滤后的列表传给PaginatedList的list属性，替换原有的users数组
3. 移除renderList里的过滤逻辑，直接渲染分页后的条目

修改后的代码示例 #

export function Users() {
    const [user, setUser] = useState("");
    const [active, setActive] = useState("");

    const [users, setUsers] = useState<any[]>([]);
    const [openUsersList, setOpenUsersList] = useState(false);

    // 提前计算全量过滤后的用户列表
    const filteredUsers = users.filter(userVal => {
        // 无过滤条件时返回全部用户
        if (user === "" && active === "") {
            return true;
        }
        // 用户名匹配逻辑（有过滤条件才校验）
        const matchesUsername = user ? userVal.username.toLowerCase().includes(user.toLowerCase()) : true;
        // active状态匹配逻辑（有过滤条件才校验）
        const matchesActiveStatus = active ? userVal.active.toLowerCase().includes(active.toLowerCase()) : true;
        // 同时满足两个过滤条件
        return matchesUsername && matchesActiveStatus;
    });

    const handleFilterByUser = (e: any) => {
        setUser(e.target.value);
    }

    return (
        // ... 其他原有代码保持不变

        <div className="mt-12 w-full">
            <p className='text-sm'>Filter</p>
            <div className="flex flex-wrap justify-center sm:justify-start gap-2 mt-4 w-full">
                <select className='border border-zinc-300 p-2' onChange={handleFilterByUser}>
                    <option value="" key={0}>Filter by name</option>
                    {usersList.concat(users).sort((a: any, b: any) => a.username.localeCompare(b.username)).map((user: any, index: any) => (
                        <option key={index} value={user.username}>{user.username}</option>
                    ))}
                </select>
            </div>
        </div>

        {/* 将分页组件的数据源改为过滤后的列表 */}
        <PaginatedList
            list={filteredUsers}
            itemsPerPage={10}
            renderList={(list) => (
                <div className="flex flex-col justify-center sm:justify-start mt-12 w-full">
                    {openUsersList && list.map((user, index) => (
                        <div key={index} className="flex flex-wrap justify-center sm:justify-start border border-zinc-300 mt-6 w-full">
                            <div className="flex items-center w-5/6 h-full p-2 sm:pl-6">
                                <div className="flex flex-col justify-between">
                                    <p className='text-blue-900 text-xs uppercase hover:underline cursor-pointer' onClick={() => openUser(user.id)}>
                                        <strong>{user.username}</strong>
                                    </p>
                                    <p className='text-zinc-500 text-xs mt-1'>
                                        <a href={"mailto:" + user.email}>
                                            {user.email}
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            )}
        />
    )
}

关键改动说明 #

• 新增filteredUsers变量：提前对所有用户数据执行过滤，确保拿到全量符合条件的用户集合
• 调整分页数据源：让PaginatedList基于过滤后的结果分页，而非原始全量数据
• 简化渲染逻辑：移除renderList内的过滤步骤，直接遍历分页后的条目即可

修改后，无论选择哪个用户做过滤，都会先从全量数据中筛选出符合条件的用户，再进行分页展示，彻底解决跨页过滤无法显示结果的问题。

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