反应-回调-3个组件

Question

我有3个组成部分：

-friendsPage，其中包含朋友列表和邀请给朋友

-friendComponent，显示可能执行的操作的朋友信息（在第三个组件中）

-userFriendshipActionComponent-显示带有可能动作的按钮（例如添加到朋友列表，从朋友中删除等）

我在多个地方使用userFriendshipActionComponent

问题是：

[当我使用第3个组件中的按钮时，我想向第1个信息传达已添加好友或从列表中删除好友的信息，因此第1个组件将刷新好友列表或刷新邀请列表

所以首先，朋友页面中的方法

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。

最后在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不是函数回调C：/repo/priv/react/clr/RandevouReact/src/pages/FriendsPage.tsx：54 51| this.getFriends（）; 52 | } 53 |其他{

54 | this.getInvitations（）; 55 | this.getFriends（）; 56 | } 57 | }

如何解决？这段代码是什么？

[如果有关系，getInvitations函数将在后端调用api，并且在接收到数据后，将其设置为friendsList或InvitationsList或同时设置两者的状态

Answer 1

抱歉，我忘记了必须绑定第一个组件（friends组件）的方法，因为我在第三个组件中丢失了“ this”，因此它试图从第三个组件而不是第一个组件调用this.getInvitations

 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>)
    })