Javascript 无法读取未定义的属性(读取头像)Reactjs

我正在try 从链接(API)获取数据，并在页面上显示它们.当我运行项目时，我收到这个错误.

用户组件代码如下:

class Users extends Component {
constructor(props){
    super(props)
    this.state = { 
        users: [],
     }
}

 async componentDidMount(){
    const response = await axios.get('https://reqres.in/api/users');
    this.setState({users: response.data.data});
    // console.log(this.state.users);
 }

render() { 
    return (<>
        <button className="btn btn-primary">Create</button>
            <div className="row">
                {this.state.users?.map((user) => {
                            console.log(user);
                    return(
                        <div className="col-4">
                         <img src={this.user.avatar} alt="" />
                         <h4>{this.user.first_name} {user.last_name}</h4>
                         <h5>{this.user.email}</h5>
                         <div className="row">
                            <div className="col-6">
                                <button className="btn">Update</button>
                            </div>
                            <div className="col-6">
                                <button className="btn">Delete</button>
                            </div>
                         </div>
                        </div>
                    )
                }
                )}
            </div>
    </>);
}

}

注意:API链接(https://reqres.in/api/users)正确，控制台日志(log)显示输出.

有谁能帮帮我吗？