引用React组件的XMLHttpRequest回调中的“this”关键字

我在React应用程序中的XMLHttpRequest回调中遇到了“this”关键字问题。这里的目标是用XML对象的响应更新组件状态。但是,在XML对象的回调函数中,“this”关键字引用的是对象本身,而不是组件。我好像逃不掉。

componentDidMount() {

        const xhr = new XMLHttpRequest();
        xhr.withCredentials = false;

        xhr.addEventListener("readystatechange", function () {
            if (xhr.readyState === 4 && this.status == 200) {
                //in the line below I cannot access my component due to 'this' keyword refering to xhr.
                this.setState({ teams: JSON.parse(this.responseText).api.teams }); 
                console.log(this.state);
            }
        });

        xhr.open("GET", "https://api-football-v1.p.rapidapi.com/v2/teams/league/3097");
        xhr.setRequestHeader("x-rapidapi-key", "xxxxxx");
        xhr.setRequestHeader("x-rapidapi-host", "api-football-v1.p.rapidapi.com");
        xhr.send(null);
    }

OBS:我必须使用XMLHttpRequest来执行这个ajax请求。