Javascript 应对订户显示问题+；标页码

我使用api获取用户，然后在页面上显示用户（这里是指向我在github上的项目的链接）一切正常，我希望在概要页面（profile.jsx）上显示我关注的用户。问题是我关注的用户可能会出现在第五页或第二十页的第三页上，我希望确保我关注的用户从第一页开始依次显示。我特意缩短了我的代码，使它更容易阅读。您可以在GitHub上更详细地查看我的代码

这就是我获得用户的地方

userscocontainer.js

import React from 'react';
import { connect } from 'react-redux';
import {Users} from './Users';
import {
    followThunk,
    getUsers,
    setCurrentPage,
    setTotalUsersCount,
    setUsers,
    unfollowThunk
} from "../Redux/users-reducer";

class UsersContainer extends React.Component {

    componentDidMount() {
        this.props.getUsers(this.props.currentPage, this.props.pageSize);
    }

    onPageChanged = (pageNumber) => {
        const {pageSize} = this.props;
        this.props.getUsers(pageNumber, pageSize);
    }

    render() {

        let pageCount = Math.ceil(this.props.totalUsersCount / this.props.pageSize);
        let pages = [];

        for (let i = 1; i <= pageCount; i++) {
            pages.push(i);
        }

        return(
            <>
                <Users {...this.props} {...this.props.user} onPageChanged={this.onPageChanged}
                       follow={this.props.followThunk} unfollow={this.props.unfollowThunk}/>
            </>
        )
    }
}

let mapStateToProps = (state) => ({
    user: state.usersPage.users,
    totalUsersCount: state.usersPage.totalUsersCount,
    currentPage: state.usersPage.currentPage,
    pageSize: state.usersPage.pageSize,
})

export default connect(mapStateToProps, {getUsers, setCurrentPage, setTotalUsersCount, setUsers, followThunk, unfollowThunk})(UsersContainer);

import React from 'react';
import {connect} from 'react-redux';
import {Profile} from './Profile';
import {profileAC} from "../Redux/profile-reduer";
import * as axios from "axios";
import withRouter from "react-router-dom/es/withRouter";
import {followUsersThunk} from "../Redux/users-reducer";

class ProfileReducer extends React.Component {
    componentDidMount() {
        let userId = this.props.match.params.userId;
        axios.get('https://social-network.samuraijs.com/api/1.0/profile/' + userId).then(response => {
            this.props.profileAC(response.data);
        });

        this.props.followUsersThunk();
    }

    render() {
        return <>
            <Profile {...this.props} />
        </>
    }
}

let mapStateToProps = (state) => ({
    profile: state.profile.profile,
    followedUsers: state.usersPage.followedUsers,
});

let urlDataRouter = withRouter(ProfileReducer)
export default connect(mapStateToProps, {profileAC, followUsersThunk})(urlDataRouter);

ProfileContainer.js

import React from 'react';
import { connect } from 'react-redux';
import {Users} from './Users';
import {
    followThunk,
    getUsers,
    setCurrentPage,
    setTotalUsersCount,
    setUsers,
    unfollowThunk
} from "../Redux/users-reducer";

class UsersContainer extends React.Component {

    componentDidMount() {
        this.props.getUsers(this.props.currentPage, this.props.pageSize);
    }

    onPageChanged = (pageNumber) => {
        const {pageSize} = this.props;
        this.props.getUsers(pageNumber, pageSize);
    }

    render() {

        let pageCount = Math.ceil(this.props.totalUsersCount / this.props.pageSize);
        let pages = [];

        for (let i = 1; i <= pageCount; i++) {
            pages.push(i);
        }

        return(
            <>
                <Users {...this.props} {...this.props.user} onPageChanged={this.onPageChanged}
                       follow={this.props.followThunk} unfollow={this.props.unfollowThunk}/>
            </>
        )
    }
}

let mapStateToProps = (state) => ({
    user: state.usersPage.users,
    totalUsersCount: state.usersPage.totalUsersCount,
    currentPage: state.usersPage.currentPage,
    pageSize: state.usersPage.pageSize,
})

export default connect(mapStateToProps, {getUsers, setCurrentPage, setTotalUsersCount, setUsers, followThunk, unfollowThunk})(UsersContainer);

import React from 'react';
import {connect} from 'react-redux';
import {Profile} from './Profile';
import {profileAC} from "../Redux/profile-reduer";
import * as axios from "axios";
import withRouter from "react-router-dom/es/withRouter";
import {followUsersThunk} from "../Redux/users-reducer";

class ProfileReducer extends React.Component {
    componentDidMount() {
        let userId = this.props.match.params.userId;
        axios.get('https://social-network.samuraijs.com/api/1.0/profile/' + userId).then(response => {
            this.props.profileAC(response.data);
        });

        this.props.followUsersThunk();
    }

    render() {
        return <>
            <Profile {...this.props} />
        </>
    }
}

let mapStateToProps = (state) => ({
    profile: state.profile.profile,
    followedUsers: state.usersPage.followedUsers,
});

let urlDataRouter = withRouter(ProfileReducer)
export default connect(mapStateToProps, {profileAC, followUsersThunk})(urlDataRouter);

users reducer.js

import {usersAPI} from "../Api/Api";

const SET_USERS = 'SET_USERS';
const SET_CURRENT_PAGE = 'SET_CURRENT_PAGE';
const SET_TOTAL_USERS_COUNT = 'SET_TOTAL_USERS_COUNT';
const FOLLOW = 'FOLLOW';
const UNFOLLOW = 'UNFOLLOW';
const FOLLOW_USERS = 'FOLLOW_USERS';

let initialState = {
    users: [],
    followedUsers: [],
    pageSize: 5, // сколько юзеров будет отоброжать на странице
    totalUsersCount: 0, // общее кол-во юзеров
    currentPage: 1, // текущая страница
    follow: false,

};

export let usersReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_USERS: {
            return {...state, users: action.users}
        }

        case FOLLOW_USERS: {
            return {...state, followedUsers: action.followedUsers}
        }

        case SET_CURRENT_PAGE: { // текущая страница
            return {...state, currentPage: action.currentPage}
        }

        case SET_TOTAL_USERS_COUNT: { // общее кол-во юзеров
            return {...state, totalUsersCount: action.count}
        }

        case FOLLOW:
            return {
                ...state,
                users: state.users.map(u => {
                    if (u.id === action.userID) {
                        return {...u, followed: true}
                    }
                    return u;
                })
            }

        case UNFOLLOW:
            return {
                ...state,
                users: state.users.map(u => {
                    if (u.id === action.userID) {
                        return {...u, followed: false}
                    }
                    return u;
                })
            }


        default:
            return state;
    }
}

export const followUsers = (followedUsers) => ({type: FOLLOW_USERS, followedUsers});
export const setUsers = (users) => ({type: SET_USERS, users});
export const setCurrentPage = (currentPage) => ({type: SET_CURRENT_PAGE, currentPage});
export const setTotalUsersCount = (totalUsersCount) => ({type: SET_TOTAL_USERS_COUNT, count: totalUsersCount});
export const follow = (userID) => ({type: FOLLOW, userID});
export const unfollow = (userID) => ({type: UNFOLLOW, userID});

export const followUsersThunk = () => {
    return (dispatch) => {
        usersAPI.getUsers().then(data => {
            dispatch(followUsers(data.items));
        });
    }
}

export const followThunk = (userID) => {
    return (dispatch) => {
        usersAPI.follow(userID).then(response => {
            if (response.data.resultCode == 0) {
                dispatch(follow(userID))
            }
        })
    }
}

export const unfollowThunk = (userID) => {
    return (dispatch) => {
        usersAPI.unfollow(userID).then(response => {
            if (response.data.resultCode == 0) {
                dispatch(unfollow(userID))
            }
        })
    }
}


export const getUsers = (currentPage, pageSize) => {
    return (dispatch) => {
        usersAPI.getUsers(currentPage, pageSize).then(data => {
            dispatch(setUsers(data.items));
            dispatch(setTotalUsersCount(data.totalCount));
        });
    }
}

export default usersReducer;