реагировать - обратные вызовы - 3 компонента - PullRequest
Новая
       6

реагировать - обратные вызовы - 3 компонента

0 голосов
/ 09 февраля 2020

У меня есть 3 компонента:

-friendsPage, в котором есть список друзей и приглашения для друзей

-friendComponent, который отображает информацию о друзьях с возможными действиями (которые находятся в 3-м компоненте)

-userFriendshipActionComponent - отображение кнопок с возможными действиями (например, добавить в список друзей, удалить из друзей и т. Д. c)

я использую userFriendshipActionComponent в нескольких местах

проблема is:

когда я использую кнопку из 3-го компонента, я хочу передать 1-й информации, что друг был добавлен или удален из списка, поэтому 1-й компонент обновит список sh друзей или refre sh список приглашений

так что, во-первых, методы в друзьях страницы 

callBack(action:string){
    if(action === 'invitations'){
        this.getInvitations();
    }
    else if(action === 'friends'){
        this.getFriends();
    }
    else{
        this.getInvitations();
        this.getFriends();
    }
}

  const friendsList = this.state.friends.map(x=>{
        return (
        <div key={x.id} style={userStyle}>
        <FriendComponent user={x}></FriendComponent>
        </div>)
    })

    const invitationsList = this.state.invitations.map(x=>{
        return (
            <div key={x.id} style={userStyle}>
            <FriendComponent user={x} callBack={this.callBack} />
            </div>)
    })



    return(
    <div className="Friends">
        <h3>Friends</h3>
        {friendsList}
        <h3>Invitations to friends</h3>
        {invitationsList}
    </div>
    )

, как вы можете видеть, я передаю функцию обратного вызова FriendComponent с помощью реквизита 

 <FriendComponent user={x} callBack={this.callBack} />

далее в friendComponent 

 callBack = (action) =>{
        console.log("friendComponent callBack");
        if(this.props.callBack!==null && this.props.callBack!==undefined)
        {
            if(action === 'removeFriend'){
                this.props.callBack('friends');
            }
            else{
                this.props.callBack();
            } 
        }
    }


    render(){

        return (
            <>

        <UserComponent user={this.props.user} />
        <UserFriendshipActionComponent userId={this.props.user.id ?? 0} callBack={this.callBack} />
        </>
        )
    }

Я передаю вторую функцию обратного вызова дочернему компоненту UserFriendshipActionComponent.

В en d в UserFriendshipActionComponent, при нажатии кнопки я использую некоторые, например, эту функцию 

acceptFriendship = (userId:number)=>{

        this.friendshipService.AcceptFriendship(userId);
        this.setState({
            friendshipStatus:'friends'
        })
        if(this.props.callBack !== null && this.props.callBack!==undefined)
            this.props.callBack("addFriend");
    }

проблема в friendsPage

× TypeError: this.getInvitations не является функцией callBack C: / repo / priv / реагировать / clr / RandevouReact / src / pages / FriendsPage.tsx: 54 51 | this.getFriends (); 52 | } 53 | еще {

54 | this.getInvitations (); 55 | this.getFriends (); 56 | } 57 | }

как это исправить? что такое wrogn с этим фрагментом кода?

, если это имеет значение, функции getInvitations вызывают api в бэкэнде и после получения данных устанавливают состояние с friendsList или invitationsList или в обоих

1 Ответ

0 голосов
/ 09 февраля 2020

извините за проблему, я забыл, что мне нужно связать метод с первого компонента (friendscomponent), потому что я потерял «this» в третьем компоненте, поэтому он попытался вызвать this.getInvitations из 3-го компонента вместо 1-го компонента 

 const friendsList = this.state.friends.map(x=>{
        return (
        <div key={x.id} style={userStyle}>
        <FriendComponent user={x} callBack={this.callBack.bind(this)}></FriendComponent>
        </div>)
    })

    const invitationsList = this.state.invitations.map(x=>{
        return (
            <div key={x.id} style={userStyle}>
            <FriendComponent user={x} callBack={this.callBack.bind(this)} />
            </div>)
    })
...