反应setState不立即更新

Question

我正在做一个待办事项应用程序。这是违规代码的非常简化的版本。我有一个复选框：

 <p><input type="checkbox"  name="area" checked={this.state.Pencil}   onChange={this.checkPencil}/> Writing Item </p>

这是调用复选框的函数：

checkPencil(){

   this.setState({

      pencil:!this.state.pencil,

  }); 

  this.props.updateItem(this.state);

}

updateItem是映射为分派到redux的函数

function mapDispatchToProps(dispatch){

  return bindActionCreators({ updateItem}, dispatch);

}

我的问题是，当我调用updateItem操作并在console.log状态时，它总是落后1步。如果未选中该复选框且该复选框不为true，则我仍将状态为true传递给updateItem函数。我需要调用另一个函数来强制状态更新吗？

Answer 1

您应该将第二个函数作为setState的回调来调用，因为setState异步发生。就像是：this.setState({pencil:!this.state.pencil}, myFunction)但是在您的情况下，由于您希望使用参数来调用该函数，因此您将不得不变得更有创造力，并且可能创建自己的函数来在道具中调用该函数：myFunction = () => {&nbsp; this.props.updateItem(this.state)}将它们结合在一起，它应该可以工作。

Answer 2

setState()由于各种原因（主要是性能），React中的调用是异步的。在幕后，React将把多个调用分批处理setState()成一个状态突变，然后一次重新渲染组件，而不是针对每个状态更改重新渲染。幸运的是，解决方案非常简单- setState接受回调参数：checkPencil(){&nbsp; &nbsp;this.setState({&nbsp; &nbsp; &nbsp; pencil:!this.state.pencil,&nbsp; }, function () {&nbsp; &nbsp; &nbsp; this.props.updateItem(this.state);&nbsp; }.bind(this));}