Question

我遇到了reactjs setState方法的一个问题。我使用socket io进行客户端和服务器之间的数据通信。在客户端UI中，我显示了故障信息列表。这个每个故障信息都来自套接字通道，我正在获取该信息并更新我的故障数组。问题：假设一次出现10个故障，10次我需要监听套接字，10次我需要更新我的setState方法来更新故障数组。在完全监听10个故障之前，此故障数组不会更新。所以这里setState将排队，而不是立即更新。那个时候我的窗口将会挂起以避免我必须做的事以及如何解决这个问题。

我的代码段

this.faultsSocket.on('fault', fault => {
    let coreFault = fault   
    let encryptedString = coreFault._str
    let encryptedStringArray = encryptedString.split(' ')
    let decryptedStringArray = []
    for (let value of encryptedStringArray) {
        if (value in description) {
            decryptedStringArray.push(description[value])
        }
    }
    coreFault._desc = decryptedStringArray.length > 0 ? decryptedStringArray.join(' ') : encryptedString    
    let faults = this.state.backupFaults
    let index = faults.findIndex(item => item._num === coreFault._num && item._obj === coreFault._obj)
    if (index > -1) {
        faults = [
            coreFault,
            ...faults.slice(0, index),
            ...faults.slice(index + 1)
        ]
    } else {
        faults = [coreFault, ...faults]
    }
    this.setState({
        faults: faults,
        backupFaults: faults
    });
})

ReactJS - setState方法问题

0 个答案: