Answer the question
In order to leave comments, you need to log in
Props do not come when you re-request a method, what could be the problem?
Good day, I had a problem, I'm learning to write code in react, I wrote a container component using connect()(), inside it there is a class component that makes requests to the server using axios(), there are 3 methods - 1. render - Which draws the desired tag, 2 componentDidMount - makes a request to the server, and draws after loading. 3. methodClick - which is triggered by clicking on the desired page and returns the required data. The problem is that it displays everything as it should, gives props and all that, but when clicked, it calls the methodClick method and for some reason the props do not come in it, although when it is called for the first time, they come, that's the question, because of what props can not come to the class component? I hope I explained well))
This is a container component, inside of which lies a class
import React from "react";
import {followAC, getCountPage, getPageCount, setIsFetch, setUsersAC, unfollowAC} from "../../Redux/users-reducer";
import {connect} from "react-redux";
import UsersWo from "../UsersС/Users";
import * as axios from "axios";
class UsersAPIComponent extends React.Component {
render() {
return <>
{ this.props.isFetching ? <div>loading</div> : null}
<UsersWo total={this.props.total}
pageSize = {this.props.pageSize}
methodClick ={this.methodClick}
users = {this.props.users}
follow = {this.props.follow}
unfollow = {this.props.unfollow}
/>
</>
}
methodClick(index) {
this.props.currentPage(index)
axios.get(`https://social-network.samuraijs.com/api/1.0/users?page${index}=&count=7`).then(response => {
this.props.setUsers(response.data.items)
})
}
componentDidMount() {
this.props.isFetch(true);
axios.get('https://social-network.samuraijs.com/api/1.0/users?page=1&count=5').then(response => {
this.props.setUsers(response.data.items)
this.props.getCountPage(response.data.totalCount)
this.props.isFetch(false);
})
}
}
let mapStateToProps = (state) => {
debugger
return {
users: state.usersPage.users,
pageSize: state.usersPage.pageSize,
total: state.usersPage.totalUsersCount,
currentPage: state.usersPage.currentPage,
isFetching: state.usersPage.isFetching
}
}
const UsersContainer = connect(mapStateToProps, {
follow: followAC,
unfollow: unfollowAC,
setUsers : setUsersAC,
currentPage: getPageCount,
getCountPage: getCountPage,
isFetch: setIsFetch})(UsersAPIComponent);
export default UsersContainer;
import React from "react";
import {NavLink} from "react-router-dom";
const UsersWo = (props) => {
let pagesCount = Math.ceil(props.total / props.pageSize);
let pages = [];
for (let i = 0; i <= pagesCount; i++) {
pages.push(i)
}
return (
<div>
<div>
{
pages.map(index => (<span onClick={ (e) => { props.methodClick(index) } }> {index} </span>))
}
</div>
{
props.users.map(u => <div key={u.id}>
<br/>
<NavLink to={`profile/${u.id}`}>{u.name}</NavLink>
{u.followed ? <button onClick={() => {
props.unfollow(u.id)
}}>follow</button> : <button onClick={() => {
props.follow(u.id)
}}>unfollow</button>}
</div>)
}
</div>
)
}
export default UsersWo
Answer the question
In order to leave comments, you need to log in
Is the context lost there?
You need to select 1 out of 3
1) try to bind in the constructor
2) rewrite methodClick to an arrow function
3) use @boundMethod from autobind-decorator
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question