在组件中使用axios WillMount方法给我带来了一个奇怪的错误

Question

我想在react代码中使用axios从服务器获取数据。我将axios代码放入react组件的组件willmount中，如下所示。

componentWillMount()
    {   
        axios
        .get("https://jsonplaceholder.typicode.com/Posts")
        .then(function(response) {
            this.setState({Posts : response.data[0].title});
        })
        .catch(function(error) {
            console.log(error);
        });
    }

但上面的代码给我带来了这样的错误

TypeError: "this is undefined"
    componentWillMount Redux

但当我对代码做了一些细微的修改，比如下面的代码时，一切都正常了。

componentWillMount()
    {   
        axios
        .get("https://jsonplaceholder.typicode.com/Posts")
        .then(response= > {
            this.setState({Posts : response.data[0].title});
        })
        .catch(error => {
            console.log(error);
        });
    }

我想说的另一件事是“this”对象在componentWillMount中是活动的

有人告诉我上面两种代码的区别吗？

Answer 1

匿名用户

您需要使用箭头函数来使用此

当您使用函数（）时，不能使用setState访问此<代码>此将返回未定义，因为其范围不指向您创建的对象。因此，您应该使用下面的代码，

工作代码：

componentDidMount()
    {   
        axios
        .get("https://jsonplaceholder.typicode.com/Posts")
        .then(() => {
            this.setState({Posts : response.data[0].title}); // `this` object points to your object here because of the arrow function.
        })
        .catch(() => { // Same case here
            console.log(error);
        });
    }

此外，Junius对componentDidMount的看法是正确的。

调用以获取数据的最佳位置是在componentDidMount（）中。componentDidMount（）只在客户端调用一次，而componentWillMount（）只在服务器上调用一次，在客户端调用一次。更多信息

Answer 2

如果使用函数（响应）{…}语法，此不是继承的，将是未定义的。您需要将此显式绑定到React组件，以便它知道如何查找此。setState：

componentWillMount()
{   
    axios
    .get("https://jsonplaceholder.typicode.com/Posts")
    .then(function(response) {
        this.setState({Posts : response.data[0].title});
    }.bind(this))  // <-- notice the .bind(this)
    .catch(function(error) {
        console.log(error);
    });
}

用响应=

Answer 3

MDN说：

箭头函数[...]是正则函数表达式的替代方法，尽管它没有自己对“this”的绑定。

如果使用常规函数，this指的是函数本身（这是未定义的）。当使用箭头函数时，this保持不变。