React：Parent 中的 setState 完成后如何执行函数

Question

当用户 select 在我的 select 框中添加一个项目时，我会使用 handleChange 函数触发的回调函数更新 parent 状态。在此之后我想根据 selected 选项做一些事情，但是，由于 setState 是异步的，我没有及时获取数据。在继续之前如何确保 setState 已完成？

parent :

class CompareTab extends React.Component {

  constructor(){
    super()
    this.state = { switchListSelected: []}
  }

  updateParentState(data, element){
    this.setState({ [element]: data })
  }
  render(){ return(<SwitchList updateParentState={this.updateParentState} switchListSelected={this.state.switchListSelected}/>)}
}

child:

class SwitchList extends React.Component{
  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(option){
    this.props.updateParentState([option], "switchListSelected")
      var url = "http://myserver/switches/snapshots/" + this.props.switchListSelected[0].value
      fetch(url)
  }

当我触发 handleChange 时

> Cannot read property 'value' of undefined

Answer 1

您必须在父项中绑定 updateParentState 函数：

您可以：

updateParentState(data, element){
   this.setState({ [element]: data })
}

或：

<SwitchList updateParentState={() => this.updateParentState()} switchListSelected={this.state.switchListSelected}/>

或者在构造函数中将其绑定到 class。

constructor(props){
  super(props)
  this.updateParentState = this.updateParentState.bind(this)
}

绑定函数后，确保数组设置为父组件的状态 - 您可以在 setState 的回调中使用 console.log 进行快速调试。在这里，您可以确保在继续之前完成 setState。

this.setState({ [element]: data }, () => { console.log(this.state.switchListSelected) })

Answer 2

由于 setState 是异步的，为了确保您获得状态的最新更改，您需要使用生命周期（它们也是异步的）。例如，您可以使用 componentDidUpdate() 生命周期。

这是 componentDidUpdate 生命周期方法的例子：

componentDidUpdate(prevProps, prevState) {
  //track changes to the previous props and states
  if (prevProps.data !== this.props.data) {
    //do something
  }
}

React：Parent 中的 setState 完成后如何执行函数

React: how to execute a function after setState in Parent has been finished

setstate

reactjs