即使使用回调和 handleFunction，setState 也不会更新状态 - ReactJs

Question

我有一个在另一个组件中调用的句柄函数。这会传递一个名为 data 的值，我想将其更新到我的 state。

//basic code
initialState = {
  wordCount:"Some Value"
  text: "Some value"
}
class Home extends Component{
  state = initialState;
  handler(data){
    console.log('Arrived',data)
    this.setState({wordCount:data,text:GetText(data,this.state)});
    this.validation();
  }
  validation(){
    console.log(this.state.wordCount)
  }
  render(){
  return (
      <div><Component handlerFunc={this.handler.bind(this)}</div>
  )
  }
       

在我的处理函数中打印出data 我确实收到了正确的信息作为字符串。我使用 setState 将wordCount 的初始值替换为data。我对text 做同样的事情。 GetText 返回一个字符串。

但是当验证运行时，我的状态是完全一样的。这怎么可能？

Answer 1

注意：react 中的 setState 是异步的。

这意味着不能保证状态会在下一条语句中改变。你可以做些什么来避免这种情况是 setState 接受回调，它将在设置状态完成时调用。

this.setState(
   {
       wordCount:data,
       text:GetText(data,this.state)
   }, 
   () => { 
    // Gets called when setState updates the state
    this.validation() 
});