B
B
Brepex2022-04-04 04:02:12
React
Brepex, 2022-04-04 04:02:12

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;


And this component, which is drawn by the class component

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


Props do not come exactly to the class component when there is a click on one of the pages
624a437151566449332438.png

Answer the question

In order to leave comments, you need to log in

1 answer(s)
H
HealSpirit, 2022-04-04
@HealSpirit

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 question

Ask a Question

731 491 924 answers to any question