Исходный код
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"
class Users extends React.Component {
componentDidMount() {
axios.get(`https://social-network.samuraijs.com/api/1.0/users?page=${this.props.currentUsers}&count=${this.props.pageSize}`)
.then(response => {
// Здесь я указываю, что в users будет приходить данные с запроса, а сам setUsers диспатчит функцию из редьюсера
this.props.setUsers(response.data.items);
debugger
})
};
onPostChanged = (pageNumber) => {
this.props.setCurrentUsers(pageNumber);
axios.get(`https://social-network.samuraijs.com/api/1.0/users?page=${pageNumber}&count=${this.props.pageSize}`)
.then(response => {
this.props.setUsers(response.data.items)
})
}
render () {
let pagesCount = Math.ceil(this.props.totalUsersCount / this.props.pageSize );
let pages = [];
for(let i = 1; i <= pagesCount; i++) {
pages.push(i);
};
return <>
<div>
{
pages.map(p => {
return <div className={this.props.currentPage === p && s.big} onClick={() => {this.onPostChanged(p)}}>{p}</div>
})
}
{
// Здесь я пытаюсь отобразить, сказал выше, но выдает ошибку
this.props.users.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={() => {this.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={() => {this.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
Сама ошибка: Cannot read properties of undefined (reading 'map')
reduser:
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: 20,
totalCountUser: 0,
currentPage: 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, currentPage: action.currentPage
}
case SET_USERS: {
return {
...state, users: action.users
}
}
case SET_TOTAL_USERS_COUNT: {
return {
...state, totalUsersCount: 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 = (currentPage) => ({type: SET_CURRENT_PAGE, currentPage})
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 {
users: state.usersPage.users,
pageSize: state.usersPage.pageSize,
totalUsersCount: state.usersPage.totalUsersCount,
currentUsers: state.usersPage.currentPage,
}
}
let mapDispatchToProps = (dispatch) => {
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)
