Как настроить пагинацию на React?

Question

[Snooom]

Проблема переключения. Выдает такую ошибку при входе

Если ее закрыть и нажать на приходящий номер страницы, то выдаст такую

Код reducer

const FOLLOWED = "ADD-POST";
const UN_FOLLOWED = "UPDATE-NEW-POST-TEXT"
const SET_USERS = "SET-USERS"
const SET_CURRENT_PAGE = "SET-CURRENT-PAGE"
const SET_TOTAL_USERS_COUNT = "SET-TOTAL-USERS-COUNT"
let initializationState = {

 users: [
 
],
pageSize: 19,
totalCountUser: 0,
currentUsers: 2,
    }

const userReducer = (state = initializationState, action) => {
switch(action.type) {
    case FOLLOWED:
   return {
    ...state,
    users: state.users.map (u => {
        if (u.id === action.userId) {
            return {...u, followed: true}
           
        }
        return u
    })
   }
   case UN_FOLLOWED:
    return {
        ...state,
        users: state.users.map (u => {
            if (u.id === action.userId) {
                return {...u, followed: false}
               
            }
            return u
        })
       }
       case SET_CURRENT_PAGE:
    return {
        ...state, currentUsers: action.currentUsers
      
       }

       case SET_USERS: {
     
            return {
                ...state, users: action.users
            }
        }
        case SET_TOTAL_USERS_COUNT: {
     
            return {
                ...state, totalCountUser: action.count
            }
        }
    default:
        
    return state;

}
   
}
export const followAC = (userId) => ({type: FOLLOWED, userId})
export const unFollowowAC = (userId) => ({type: UN_FOLLOWED, userId})
export const setUsersAC = (user) => ({type: SET_USERS, user})
export const setCurrentPageAC = (currentUsers) => ({type: SET_CURRENT_PAGE, currentUsers})
export const setUsersTotalCountAC = (totalCountUser) => ({type: SET_TOTAL_USERS_COUNT, count: totalCountUser})
export default userReducer

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

import { connect } from "react-redux"
import { followAC, unFollowowAC, setUsersAC, setCurrentPageAC, setUsersTotalCountAC } from "../../redux/user-reducer"
import Users from "./User"

let mapStateToProps = (state) => {

    return {
   
     pageSize: state.usersPage.pageSize,
     totalUsersCount: state.usersPage.totalCountUser,
     currentUsers: state.usersPage.currentUsers,
    }
    
   }


   let mapDispatchToProps = (dispatch) => {
    debugger
    return {
        follow: (userId) => {
    dispatch(followAC(userId))
      },
      unFollowow: (userId) => {
        dispatch(unFollowowAC(userId))
      },
      setUsers: (user) => {
        dispatch(setUsersAC(user))
      },setcurrentUsers: (pageNumber) => {
        dispatch(setCurrentPageAC(pageNumber))
      },
      setTotalUsersCount: (totalCount) => {
        dispatch(setUsersTotalCountAC(totalCount))
      }
    }
    }

export default connect(mapStateToProps, mapDispatchToProps)(Users)

Код самой компоненты

import React from "react"
import axios from "axios";
import s from "./user.module.css"
import userPhoto from "../../acces/img/png-transparent-computer-icons-user-avatar-avatar-face-heroes-monochrome.png"
 function Users (props) {

debugger
    const baseURL = `https://social-network.samuraijs.com/api/1.0/users?page=${props.currentUsers}&count=${props.pageSize}`;
    const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
    
      setPost(response.data);
      props.setTotalUsersCount(response.data.totalCount)
     
    });
  }, []);

  
  if (!post) return null;
   function onPostChanged (pageNumber)  {
    const baseURLTwo = `https://social-network.samuraijs.com/api/1.0/users?page=${pageNumber}&count=${props.pageSize}`;
    const [p, setTotalUsersCount] = React.useState(null);

  React.useEffect(() => {
    axios.get(baseURLTwo).then((response) => {
      props.setcurrentUsers(pageNumber)
      
    });
  }, []);
   

   }
    let pageCount = Math.ceil(props.totalUsersCount / props.pageSize);
    let pageL = [];
    for(let i = 1; i <= pageCount; i++) {
      pageL.push(i)
  
    }
    debugger
    return    <>
    <div>
     {
      pageL.map(p => {
      
        return     <div  className={props.currentUsers === p && s.big} onClick={() => {onPostChanged(p)}}>{p}</div>
        debugger
      })
     }
       
{
    
    post.items.map( u => <div key={u.id}>
 
<div className={s.card}>
    <img  className={s.card_img} src={userPhoto} alt="avatar" />
<div className={s.card_text}>
    <div>
<p className={s.card_name}>{u.name}</p>
<p>1 общий друг</p>
</div>
<div>
    
{
// МЕСТО С ОТОБРАЖЕНИЕМ КАРТИНОК
u.followed 
? <button className={s.adduser}  onClick={() => {props.unFollowow(u.id)}}><img className={s.adduser} src="https://www.svgrepo.com/show/487269/delete-profile.svg" alt="u" /></button>   
: <button className={s.adduser}  onClick={() => {props.follow(u.id)}}><img className={s.adduser}  src="https://www.svgrepo.com/show/47844/add-friend.svg" alt="f" /></button>  }
</div>


</div>
</div>
    </div>)
}
    </div>
     
    </>
    
    
}




export default Users

Comments

[WbICHA]

Выдает такую ошибку при входе

Замечательно. А там что, какие-то иероглифы написаны, несвязный текст или рандомный набор букв, что ты не смог её прочитать?

Answer 1

[Анатолий Куликов]

React говорит - кастомный хук и компонент названы неправильно (нарушен code-style). Просто поменяйте название по указанным рекомендациям (они на скрине прям).