在setState之后反应状态未定义？ [复制]答案

【问题标题】：React state undefined after setState? [duplicate]在setState之后反应状态未定义？ [复制]
【发布时间】：2018-04-07 19:35:52
【问题描述】：

我有一个处理程序，它会在输入字段发生更改时触发。但是，当我将状态记录到控制台时，resData 是“未定义”吗？这是不可能的，因为 console.log(body) 确实会返回结果。

handlePersonNameChange(event) {
var resData
request('https://swapi.co/api/people/?search='+event.target.value, function (error,response,body) {
  console.log(body)
  resData = body
})
this.setState({personData: resData});
console.log(this.state)
}

【问题讨论】：

您应该在请求回调中设置状态。此外，在 React 中设置状态是异步的，所以你不能在下一行 setState() 然后 console.log(this.state) 并期望看到状态更新。
在这种情况下，我得到 TypeError: this.setState is not a function

标签： reactjs

【解决方案1】：

this.setState({ state : "new1" })

此方法不是同步的，因此当您记录状态时，它尚未更新。

您应该在 componentWillUpdate 生命周期方法中记录它。

【讨论】：

【解决方案2】：

请求调用是异步的，您应该将this.setState 放在响应正文中。

另外this.setState 是异步的，要查看结果你应该使用回调函数。在设置新状态后调用此函数。

handlePersonNameChange(event) {
  var resData
  request('https://swapi.co/api/people/?search='+event.target.value, 
  function (error,response,body) {
    console.log(body)
    resData = body
    this.setState({personData: resData}, function() {
      console.log(this.state)
    })
  })
}

更多关于this.setState()的信息可以在here找到

【讨论】：

【解决方案3】：

你需要在请求回调里面setState，例如：

request('https://swapi.co/api/people/?search='+event.target.value, function (error,response,body) {
  console.log(body)
  resData = body
  this.setState({personData: resData});
})

因为在您的示例中执行 setState 时，您的请求尚未解决。

【讨论】：

在这种情况下，我得到 TypeError: this.setState is not a function。
那是因为你的回调没有绑定。您可以使用箭头函数（如果您有 ES6 支持）（错误、响应、正文）=> { this.setState({personData: body}) }