Question

componentDidMount() {
  var self = this;

  axios.get('http://URL')
    .then(function (response) {
      console.log(response.data);
      this.setState({
        data: response.data
      })
    })
    .catch(function (error) {
      console.log(error);
    });
}

我收到此错误：TypeError：无法读取未定义的属性'setState'

Answer 1

使用箭头功能，因此您不必依赖局部变量，范围将自动得到保护

 componentDidMount(){
     axios.get('http://URL')
         .then( response => {
            console.log(response.data);
            this.setState({data: response.data})
     })
    .catch(error =>  {
        console.log(error);
   });
 }

或者在进行如下所示的setState时将其替换为self

  componentDidMount(){
      var self = this;
      axios.get('http://URL')
         .then(function (response) {
             console.log(response.data);
             self.setState({data: response.data})
     })
    .catch(function (error) {
       console.log(error);
    });
  }

以上两个选项均有效。我建议您选择第一个选择

Answer 2

如果在setState上使用randoms' g = x : (randoms' g') where (x, g') = next g而不是self，则应该可以解决。

Answer 3

您可以使用ES6箭头功能为您自动绑定词法父范围。

componentDidMount(){
     axios.get('http://URL')
         .then( response => {
            console.log(response.data);

            this.setState({
                data: response.data
            })
     })
    .catch(error =>  {
        console.log(error);
   });
 }

引入self是过大的，它来自jQuery。在引入ES6箭头功能之前使用它。

您可以在以下箭头功能中阅读有关自动this绑定的信息：

https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

还要检查这些链接，以更好地了解this在Javascript中的工作方式和作用域的逻辑：

https://scotch.io/tutorials/understanding-scope-in-javascript https://javascriptplayground.com/javascript-variable-scope-this/

Answer 4

您可以避免# test.py Done上下文问题，并使用此替代方法。由于Axios返回了承诺，因此您可以使用 async / await ，而不必考虑this上下文。

像这样使用它：

this

看起来更易读，也更易于用于其他功能和组件。

无法使用axios setState

4 个答案: