Question

为什么不能将状态设置为已经在状态中定义的状态变量，所以我也尝试将状态设置为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）。 Learn more about it

 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

您遇到示波器问题。 this中的axios.then()是指本地范围。

似乎您已经使用变量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 scope

的信息

Answer 3

我认为您需要在完成axios后期调用的地方绑定功能。或者，您可以将该函数设为匿名。例如：

postData(){
   .... axios call
}

成为

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

Answer 4

因为 es5 this是指在其上调用了功能的对象。您的情况可能是全局范围窗口。您可以使用bind方法。

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()
    }.bind(this))

或者如果您使用 es6 ，那么您还可以使用箭头功能

 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()
    })

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

4 个答案: