componentDidMount 中的 setState 不起作用

Question

我发现其他帖子也有类似的错误，但那些帖子有需要绑定的功能。在下面的简单程序中，我尝试在 AJAX 请求成功后更新 DOM，但出现错误“.TypeError：this.setState 不是函数”。请帮助我理解为什么这段代码不起作用。import React from 'react';import logo from './logo.svg';import './App.css';export class App extends React.Component {    constructor(props) {        super(props);        this.state = {            name: '(name will be inserted after ajax request)'        };        console.log('constructor');    }    componentDidMount() {        //AJAX REQUEST        const url = 'http://localhost:8080/ping';        const xhr = new XMLHttpRequest();        xhr.responseType = 'text';        xhr.onreadystatechange = function() {            if (xhr.readyState === XMLHttpRequest.DONE) {                console.log(xhr.responseText);                this.setState({name: xhr.responseText});            }        }        xhr.open("GET", url);        xhr.send();    }    render() {        console.log('render')        return <h1 > Hello {this.state.name} </h1>;    }}

Answer 1

尝试改变

xhr.onreadystatechange = function() {

到

xhr.onreadystatechange = () => {

简短说明：

内部thisafunction () {}取决于调用它的对象，因此当您将函数传递到某处时，您真的不知道this将引用什么。

对于箭头函数，this指的this是封闭函数中的相同内容，即 for 的值this是词法解析的。

您可以在此处阅读更详细的说明

Answer 2

将函数更改为箭头函数或将其作为函数中的参数传递，然后在函数中使用 this.setState({}) 像这样

  xhr.onreadystatechange = function(this) {

         if (xhr.readyState === XMLHttpRequest.DONE) {

            console.log(xhr.responseText);

            this.setState({name: xhr.responseText});

        }

    }

Answer 3

确保引用正确的对象或使用箭头函数

componentDidMount() {

        //AJAX REQUEST

        var that = this;//make sure you reference the right object

        const url = 'http://localhost:8080/ping';

        const xhr = new XMLHttpRequest();

        xhr.responseType = 'text';

        xhr.onreadystatechange = function() {

            if (xhr.readyState === XMLHttpRequest.DONE) {

                console.log(xhr.responseText);

                that.setState({name: xhr.responseText});

            }

        }

        xhr.open("GET", url);

        xhr.send();

    }