Question

返回错误无法读取未定义的 reactjs 的属性“setstate”

2018-10-11

308

reactjs

为什么我不能将状态设置为我已经在状态中定义的状态变量，我也尝试将状态设置为 this.state.propval = response.data 。

状态声明，

constructor(props) {
        super(props);
        this.state = {
     propval:null,
        };
    }

发送axios请求并在此处获取响应。

 axios.post('/eventcreate/createevent', data)
    .then(function (response) {
      alert(response.data)
      var result = response.data
      console.log("result out :"+result)
      this.setState({propval : result})
      this.propfun(response.data)
      self.forceUpdate()
    })

但出现错误

Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined
(anonymous function)
src/components/forms/neweventcreation.js:306
  303 | alert(response.data)
  304 | var result = response.data
  305 | console.log("result out :"+result)
> 306 | this.setState({propval : result})
  307 | 
  308 | this.propfun(response.data)
  309 | self.forceUpdate()

请帮我解决这个问题。

Answer 1

这不起作用，因为 this 在 axios 内部是不同的。axios 中的 this 指的是 axios 对象，而不是您的 React 组件。

如果您使用 ES6，您可能想要使用箭头函数（它们没有自己的 this ）。了解更多信息

 axios.post('/eventcreate/createevent', data)
    .then((response) => {
      alert(response.data)
      var result = response.data
      console.log("result out :"+result)
      this.setState({propval : result})
      this.propfun(response.data)
      self.forceUpdate()
    })

如果您不使用 ES6，您可以这样做：

var self = this;
axios.post('/eventcreate/createevent', data)
   .then(function (response) {
   ...
   self.setState({propval : result})
   ...
})

Answer 2

你有一个范围问题。 axios.then() 中的 this 引用本地范围。

似乎你已经用变量 self 添加了全局引用

试试这个

let that = this; //global scope
axios.post('/eventcreate/createevent', data)
.then(function (response) {
  //this referes to the current function scope.
  alert(response.data)
  var result = response.data
  console.log("result out :"+result)
  that.setState({propval : result}) // or self.setState({propval : result})
  that.propfun(response.data)  //or self.propfun(response.data) 
  self.forceUpdate()
})

阅读本文以了解更多 javascript 范围

Answer 3

我认为您需要绑定已完成 axios 后调用的函数。或者您可以将该函数设为匿名函数。例如：

postData(){
   .... axios call
}

变为

postData = () => {
     ... axios call
}