短时间内多个请求状态更新，导致react 不能及时响应问题总结

个人总结

这段时间项目中遇到这样一个问题，旧项目中增加了一个聊天对话的模块，这是其他同学负责的部分，因为要有消息提醒，所以做了个轮询。消息提示因为是页头部分，所以每个模块都会引用到。这是背景。

现象

我负责的详情页部分，因为内容比较多，所以会有3个请求发出，修改的数据内容也比较多，来改变state以改变视图。

本次也只是加了点东西而已，原本是可以正常显示。

本地mock时也没什么问题，发布至测试环境发现数据不能得到渲染。 呈现出来就是页面一片空白。

调试过程

初步判断可能是代码逻辑问题，因为该页面涉及到新建，编辑，不同类型的不同展示情况，同时有编辑之后的预览。所以逻辑比较多

renderCont(type,post,isReview) {
        let cont = null
        //未获得返回，不渲染
        if(!contentType){
            return cont
        }
        //条件一
        if(contentType == 1){
            //更多省略
            cont = <div>{str && this.getContent(str)}</div>
            return cont
        }
        // 条件二
        if(type ==1){
            let coverImageUrl = post.get('coverImageUrl')
            //。。。
            return cont
        }
        //条件三四
        return  (isReview ? <div>1</div>:<div>2</div>)

    }

断点跟进去之后发现，只走了第一个，默认无数据时的null，后面数据不再变化。排除数据异常的可能性之后。

猜测是短时间数据变动太多，导致react没有及时响应，因为pc是单页应用，页头部分的更新也在改变数据。

可以看一下我们五秒内的网络请求：

本地响应比较及时，没什么大的影响。测试环境上就发现断点进入到react判断是否更新的方法时，可以发现

• props 里element已经是填充了数据的dom对象，而更新判断认为没有改变。这个原因只能去猜测是同时更新太多状态没有得到及时响应。

具体原因,这里先占个坑，研究一下react更新机制再说

具体解决，也没什么好办法，既然同时更新导致，那就进行函数截流，

即轮询请求成功之后，使用setTimeout延时更新数据，这样是可以接受的，消息提示晚一点渲染也是没影响的。