对React setState的多次更新导致重新渲染并阻塞

Question

您好，第一次连接到Web套接字时，我收到一连串大约100个个人事件响应，这些响应不是promise的一部分，而是按以下方式逐个处理的，例如数据被接收

 handleValueStateChange = (event) => {
  const { controls } = this.state;
  let _controls = Object.entries(controls);
    for (let cont of _controls) {
        let states = cont[1].states;
            if (states) {
                let state = Object.entries(states);
                for (let [stateId, contUuid] of state) {
                    if (contUuid === event.uuid) {
                    controls[cont[0]].statesValue[stateId] = event.value; 
                    this.setState({ controls });                               
                    }
                }
            }
        }         
    } 

在最初的忙碌之后，以上内容仅会被调用三到四分钟，这在随后将controls = {this.state.controls}作为子组件的道具传递时没有问题。

但是，我该如何调整上面的代码，以尝试减慢在初始乱码阶段更新控件状态的次数，因为这会由于不断的重新渲染而导致子组件的阻塞。