反应 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 步。如果复选框未选中且不为真，我仍然会将真状态传递给 updateItem 函数。我是否需要调用另一个函数来强制更新状态？

原文由 lost9123193 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您应该调用第二个函数作为 setState 的回调，因为 setState 是异步发生的。就像是：

 this.setState({pencil:!this.state.pencil}, myFunction)

但是，在您的情况下，由于您希望使用参数调用该函数，因此您将不得不更具创意，并且可能创建自己的函数来调用道具中的函数：

 myFunction = () => {
  this.props.updateItem(this.state)
}

将它们结合在一起，它应该可以工作。

原文由 Ben Hare 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

由于各种原因（主要是性能），在 React 中调用 setState() 是异步的。在幕后，React 会将对 setState() 的多次调用批量化为单个状态突变，然后一次重新渲染组件，而不是为每个状态更改重新渲染。

幸运的是，解决方案相当简单 - setState 接受一个回调参数：

 checkPencil: () => {
   this.setState(previousState => ({
      pencil: !previousState.pencil,
   }), () => {
      this.props.updateItem(this.state);
   });
}

原文由 rossipedia 发布，翻译遵循 CC BY-SA 4.0 许可协议