Question

constructor(){
  super();
  this.state = {
     data: ''
  }
}


axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
   this.setState({data: response });  // here i am getting error
   console.log(this.state.data);
})
.catch(function (error) {
  console.log(error);
});

在我的反应本机应用程序中我无法setState ajax响应..当我试图更新状态在这里它抛出错误并执行捕获功能...我不知道它为什么会发生你可以请给我快速建议

Answer 1

那是因为您使用ES2015语法来创建函数，默认情况下它不会绑定上下文。请改用箭头功能：

.then((reponse) => {
    console.log(response);
    this.setState({data: response });
    console.log(this.state.data);
}

Answer 2

首先，请阅读箭头功能和正常功能声明之间的difference。

this.setState({})仅在您使用箭头函数() =>时才有效，或者您可以通过将this保存在变量中来以旧方式执行此操作：

fetchData() {
    const self = this;
    axios.post('/user', {
      firstName: 'Fred',
      lastName: 'Flintstone'
    })
    .then(function (response) {
      console.log(response);
       self.setState({data: response });  // here i am getting error
       console.log(self.state.data);
    })
    .catch(function (error) {
      console.log(error);
    });
}

但是，我更喜欢使用箭头功能，因为它更简单。

例如：

fetchData() {
    axios.post('/user', {
      firstName: 'Fred',
      lastName: 'Flintstone'
    })
    .then(response => this.setState({data: response }) )
    .catch(console.log);
}

P.S：您还可以使用this方法绑定.bind(this)。

在我的反应本机应用程序中，我无法setState ajax响应

2 个答案: