react 解决map遍历的标签中this失效 TypeError: Cannot read properties of undefined (reading ‘handleUserClick‘)

    render(){
        let list = this.props.users;
        // let self = this;
        return (
            <div>
                <ul className='user-list'>
                    {
                        list.map(function(user){
                            return <li key={user.id} onClick={this.handleUserClick.bind(this,user.id)} >{user.name}</li>
                        })
                    }
                </ul>
                <input onChange={this.handleChange} value={this.state.newUser}/>
                <button onClick={this.handleClick}>add</button>
            </div>
        );
    }

改为

    render(){
        let list = this.props.users;
        let self = this;
        return (
            <div>
                <ul className='user-list'>
                    {
                        list.map(function(user){
                            return <li key={user.id} onClick={self.handleUserClick.bind(self,user.id)} >{user.name}</li>
                        })
                    }
                </ul>
                <input onChange={this.handleChange} value={this.state.newUser}/>
                <button onClick={this.handleClick}>add</button>
            </div>
        );
    }

或者

render(){
        let list = this.props.users;
        // let self = this;
        return (
            <div>
                <ul className='user-list'>
                    {
                        list.map(function(user){
                            return <li key={user.id} onClick={this.handleUserClick.bind(this,user.id)} >{user.name}</li>
                        }.bind(this))
                    }
                </ul>
                <input onChange={this.handleChange} value={this.state.newUser}/>
                <button onClick={this.handleClick}>add</button>
            </div>
        );
    }

原因:map中的this并不是当前类的this
解决:
1、xx.map(function(xx){xx}.bind(this))
2、xx.map(xx,bind(this)) 当参数传递
3、在map外定义x=this;在map内使用x代替this

引用：https://blog.csdn.net/weixin_43294560/article/details/106575735