关于this.setState()无法及时更新数据状态问题


  • 0

    用this.setState()修改了数据状态,现在有个组件不在render方法内,通过鼠标右击触发动作,但是这个组件的display现实状态总是要慢一拍,没办法及时更新,请问有人知道是怎么回事吗?
    0_1497234785839_upload-1c3d86f3-1c6c-4227-b4f1-bb97a2889d94
    0_1497234798513_upload-623fbc4b-6193-474d-9beb-1589e3cb8388
    0_1497234816088_upload-584061db-16de-42a1-8686-2d49a3718fa9
    0_1497234827166_upload-19c1789d-681d-4091-8392-f6c4759e3636
    比如说最初的this.state.addLiShow 和 this.state.modDelLiShow值都为空,触发事件后,程序走了onRightClick()方法,但是那个ul列表里的Li数据状态并没有更新,第二次右击再次触发后,Li里的数据才会更新为上次点击时的数据状态,其中在render方法里数据是更新了的,但是这个组件在renderCm( )方法中,没有做到及时更新,请问这种让怎么让他及时更新啊???寻求各位大哥帮助~


  • 1

    这个问题已经解决了,不过一直没人回复,自己回复下好了~。~,如果有同学以后遇到类似的问题,也好有个思路。
    正常在执行this.setState()方法时,会触发render()方法,因此写在render()方法里的内容能做到及时更新,但是这里需要数据更新的组件是在renderCm()方法中,没有没在render()中,所以无法做到及时更新数据状态。修改也很简单,在onRightClick()方法中使用this.setState()方法后,再回调函数里重新执行一次renderCm()方法,等于让这个组件手动重新渲染一次,这样就可以做到数据的及时更新了。就像这样0_1497411215132_upload-286f7905-0a3b-4561-9a4f-8c9f6e68dd26
    不过需要注意的是,这个方法里需要加入一句info.event.persist(),不然就会报错0_1497411338792_upload-8004e665-1459-4348-b6a2-bc54022ef2a2
    具体原因也不是很理解,可以参考https://discountry.github.io/react/docs/events.html,个人理解是因为触发事件时,会接收到SyntheticEvent这个东西的实例,我把这个理解成一个资源池,类似redux中的store那种,所有的触发事件都会被合成,只返回一个SyntheticEvent实例,使用回调后,事件参数里的属性被置空,所以访问不到事件的具体属性,使用了info.event.persist()这句话,不会将事件合成,保持原有对事件的引用。这些是个人理解的,如果对了,希望能对遇到类似问题的朋友有帮助,如果不正确,也希望各位大哥指出~刚开始接触react,还比较菜鸡~。~


  • 0

    @闪电幻想关于this.setState()无法及时更新数据状态问题 中说:

    用this.setState()修改了数据状态,现在

    牛人呐


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待