为了账号安全,请及时绑定邮箱和手机立即绑定

反应setState不立即更新

/ 猿问

反应setState不立即更新

动漫人物 2019-11-19 11:14:28

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


 <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函数。我需要调用另一个函数来强制状态更新吗?


查看完整描述

3 回答

?
狐的传说

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


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

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


myFunction = () => {

  this.props.updateItem(this.state)

}

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


查看完整回答
反对 回复 2019-11-19
?
慕勒3428872

setState()由于各种原因(主要是性能),React中的调用是异步的。在幕后,React将把多个调用分批处理setState()成一个状态突变,然后一次重新渲染组件,而不是针对每个状态更改重新渲染。


幸运的是,解决方案非常简单- setState接受回调参数:


checkPencil(){

   this.setState({

      pencil:!this.state.pencil,

  }, function () {

      this.props.updateItem(this.state);

  }.bind(this));

}


查看完整回答
反对 回复 2019-11-19
?
慕沐林林

当使用当前状态的属性更新状态时,React文档建议您使用函数调用版本setState而不是对象。


所以setState((state, props) => {...})代替setState(object)。


原因是setState更多的是请求状态更改,而不是立即更改。React将这些setState呼吁分批提高性能。


意味着您要检查的状态属性可能不稳定。这是一个潜在的陷阱。


有关更多信息,请参见此处的文档:https : //facebook.github.io/react/docs/react-component.html#setstate


为了回答您的问题,我会这样做。


checkPencil(){

    this.setState((prevState) => {

        return {

            pencil: !prevState.pencil

        };

    }, () => {

        this.props.updateItem(this.state)

    });

}


查看完整回答
反对 回复 2019-11-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信