1

Olá,

Tenho um componente em React que se conecta a um websocket com os seguintes parametros (NUM_ITEMS=100, MSGS_PER_SECOND=100). Sendo assim, eu listo uma tabela com 100 itens e os atualizo por ID à media que os novos vão chegando. Contudo, quando esses dois paramêtros são alterados para 1000, minha aplicação trava, não por receber as 1000 mensagens, mas na tentativa de atualizar.

Olhando outras threads, vi que uma solução seria enfileirar as mensagens e processa-las uma de cada vez. Daí tentei fazer dessa maneira (funciona com os valores em 100), mas em 1000 continua travando. Alguém poderia me indicar uma maneira correta de fazer isso? Detalhe: nao posso paginar e nem alterar o websocket.

constructor(props){
    super(props);

    this.state = {
      data: [],
      messages: []
    }
  }

  componentWillUpdate(){
    this.interval = setTimeout(() => {
      let messages = [...this.state.messages];
      let jsonData = messages.map(msg => {
          let message = JSON.parse(msg);
          return message;
      });

      if(jsonData){
        jsonData.map(nextMsg => {
          const cur = this.state.data;
          const idx = cur.findIndex(el => el.id === nextMsg.id);
          if(idx != -1){
            cur[idx] = nextMsg;
          }
          else{
            cur.push(nextMsg);
          }
          cur.sort((a, b) => { return (a.value > b.value) ? 1 : -1 });
          this.setState({data: cur});
        })
        let reducedMsgs = [...this.state.messages];
        reducedMsgs.splice(0, messages.length);
        this.setState({ messages: reducedMsgs });
      }
    }, 10);
    console.log(this.state.messages.length)
  }

  componentDidUpdate() {
    setTimeout(this.interval);
  }

  handleOpen = () => {
    this.refWebSocket.sendMessage('init');
  }

  handleData = (data) => {
    let messages = [...this.state.messages];
    messages.push(data);
    this.setState({messages})
  }

  render() {
    return (
      <div>
        <Websocket 
          url='ws://localhost:7770'
          onMessage={this.handleData}
          onOpen={this.handleOpen}
          ref={Websocket => {
            this.refWebSocket = Websocket;
          }}/>
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>ID</th>
              <th>Value</th>
              <th>Name</th>
            </tr>
          </thead>
          <tbody>
            {this.state.data.map(row => {
              return (
                <tr>
                  <td>{row.id}</td>
                  <td>{row.value}</td>
                  <td>{row.name}</td>
                </tr>
              )
            })}
          </tbody>
        </Table>
      </div>
    )
  }

Esse é meu componente. A função handleDataenfileira as mensagens no state messages. No método componentWillUpdateestou tentando fazer as atualizações, mas trava quando chega a receber 1000 itens em 1000 mensagens por segundo.

Agradeço antecipadamente a colaboração.

1 Resposta 1

0

Eu acho que sua aplicação está travando porque você tem um setState dentro de um loop, este: jsonData.map(....., ao invés de setar o estado toda hora(no loop), coloca numa variavel por enquanto(no loop), quando o loop terminar chama o setState.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .