Почему отображается глобальное количество пользователей на каждой из страниц, а незаданое количество в state?

Question

Для понимания: я делаю запрос на сервер, чтобы получить определённое количество пользователей, я их получаю, затем ,так как у меня в state захардкодино кол-во отображаемых пользователей на одной странице и сколько их вообще, произвожу вычисления по выяснению сколько страниц у меня будет, чтобы отобразить одинаковое кол-во пользователей на каждой странице.

И вот в чём заключается заминка: Мне лично неясно почему, но отображается не то количество пользователей сколько должно. Условно 5-это, то кол-во пользователей которое должно отображаться на каждой из страниц, 20-это сколько всего пользователей. Логично, что страниц будет 4 =20:5 и на каждой по 5 пользователей, но отображается по 20 и на каждой странице.

(Если, что на каждой странице должны быть разные пользователи.) Буду очень рад, если поможете. Код из главного файла:

import React from "react";
import styles from "./PageSearchUsers.module.css";
import axios from "axios";
import userPhoto from "../../../Public/Ava.png";
class PageSearchUsers extends React.Component {
  componentDidMount() {
    axios
      .get(
        `https://social-network.samuraijs.com/api/1.0/users?page=${this.props.currentPage}&count=${this.props.totalCountUsers}`
      )
      .then((response) => {
        this.props.setUsers(response.data.items);
      });
  }
  onPageChanged = (page) => {

    axios
    .get(
      `https://social-network.samuraijs.com/api/1.0/users?page=${page}&count=${this.props.totalCountUsers}`
      )
      .then((response) => {
        this.props.setUsers(response.data.items);
      }); 
      this.props.setCurrentPage(page);
  };
  render() {
    let countsPages = Math.ceil(
      this.props.totalCountUsers / this.props.countUsers
    );
    let pages = [];
    for (let i = 1; i <= countsPages; i++) {
      pages.push(i);
    }
    return (
      <div>
        <div>
          {pages.map((page) => {
            return (
              <span
                className={
                  this.props.currentPage === page ? styles.selectedpages : ""
                }
                key={page}
                onClick={(p) => {
                  this.onPageChanged(page);
                }}
              >
                {page}
              </span>
            );
          })}
        </div>
        {this.props.users.map((user) => (
          <div key={user.id} className={styles.padding}>
            <span>
              <div>
                <img
                  className={styles.userphoto}
                  src={
                    user.photos.small != null ? user.photos.small : userPhoto
                  }
                  alt=""
                />
              </div>
              <div>
                {" "}
                {user.followed ? (
                  <button
                    onClick={() => {
                      this.props.unfollow(user.id);
                    }}
                  >
                    unFoLLOW
                  </button>
                ) : (
                  <button
                    onClick={() => {
                      this.props.follow(user.id);
                    }}
                  >
                    Follow
                  </button>
                )}
              </div>
            </span>
            <span>
              <span>
                <div>
                  {user.name}
                  <div>
                    {user.status}
                    <div>
                      {"user.location.country"}
                      <div>{"user.location.city"}</div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </span>
            </span>
          </div>
        ))}
      </div>
    );
  }
}

export default PageSearchUsers;

Код из контейнерной компоненты:

import { connect } from "react-redux";
import { followAC, setUserAC, unfollowAC, setCurrentPageAC, setTotalCountAC, } from "../../Redux/SearchNewUsersReduscer";
import PageSearchUsers from "./SearchNewUsers";

const mapStateToProps = (state) => {
  return {
    users: state.usersPage.users,
    countUsers: state.usersPage.countUsers,
    totalCountUsers: state.usersPage.totalCountUsers,
    currentPage: state.usersPage.currentPage,
  };
};

const mapDispatchToProps = (dispacth) => {
  return {
    follow: (userid) => {
      dispacth(followAC(userid));
    },
    unfollow: (userid) => {
      dispacth(unfollowAC(userid));
    },
    setUsers: (users) => {
      dispacth(setUserAC(users));
    },
    setCurrentPage: (page) => {
      dispacth(setCurrentPageAC(page));
    },
    setTotalUsersCount:(totalcount)=>{
      dispacth(setTotalCountAC(totalcount))

    }
  };
};

const PageSearchUsersContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(PageSearchUsers);

export default PageSearchUsersContainer;

И код из state:

const FOLLOW = "FOLLOW";
const UNFOLLOW = "UNFOLLOW";
const SET_USERS = "SET-USERS";
const SET_CURRENT_PAGE = "SET-CURRENT-PAGE";
const SET_TOTAL_USERS_COUNT = "SET-TOTAL-USERS-COUNT";
let initialState = {
  users: [],
  countUsers: 5,
  totalCountUsers:20,
  currentPage: 2,
};

export const SearchNewUsersReduscer = (state = initialState, action) => {

  switch (action.type) {
    case FOLLOW:
      return {
        ...state,
        users: state.users.map((user) => {
          if (user.id === action.userid) {
            return { ...user, followed: true };
          }
          return user;
        }),
      };
    case UNFOLLOW:
      return {
        ...state,
        users: state.users.map((user) => {
          if (user.id === action.userid) {
            return { ...user, followed: false };
          }
          return user;
        }),
      };
    case SET_USERS:
      return { ...state, users: action.users };
    case SET_CURRENT_PAGE:
      return { ...state, currentPage: action.currentPage};
    case SET_TOTAL_USERS_COUNT:
      return{...state, totalCountUsers: action.totalCountUsers}
    default:
      return state;
  }
};

export const followAC = (userid) => {
  return {
    type: FOLLOW,
    userid,
  };
};
export const unfollowAC = (userid) => {
  return {
    type: UNFOLLOW,
    userid,
  };
};
export const setUserAC = (users) => {
  return { type: SET_USERS, users };
};
export const setCurrentPageAC = (currentPage) => {
  return { type: SET_CURRENT_PAGE, currentPage };
};
export const setTotalCountAC = (totaluserscount) => {
  return { type: SET_TOTAL_USERS_COUNT, totaluserscount };
};
export default SearchNewUsersReduscer;

БЛОГ НА HUSL

Почему отображается глобальное количество пользователей на каждой из страниц, а незаданое количество в state?

Ответы (0 шт):