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

Posted 2023-02-21

【中文标题】在setState之后反应状态未定义？ [复制]

【英文标题】：React state undefined after setState? [duplicate]

【发布时间】：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

【参考方案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)