[chiffa_cff]

Все добрый день. Есть модуль сайта, который динамически получает данные через ВебСокеты. Вопрос, как вызвать рендер, что бы данные обновились?...

Часть кода:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import cx from 'classnames';
import uuidv4 from 'uuid/v4';
import formatNumber from '../../../../helpers/numFormat';
import { Icon } from '../../../../components/component';
import axios from 'axios';
import { history } from '../../../../helpers';
import StorageService from '../../../../helpers/storage'; 
import { platform } from '../../../../api/lib/platform'; 

import './Info.scss';



********************


WS_client.onmessage = function(e){
   var server_message = e.data;
   console.log(server_message);

 if (server_message!="{}")
   {

MOCK_BUY = GetData (server_message.replace(/\\/g, ""), false);

[B]/*ТУТ НЕОБХОДИМО ОБНОВИТЬ МОДУЛЬ*/[/B]

   }

}


const MOCK_COURCE = {
  price: 12.337,
  change: 2.4,
};
const orederBookSort = {
  COURCE: 'COURCE',
  SELL: 'SELL',
  BUY: 'BUY',
};

const mapStateToProps = () => ({});

@translate(['common'], { wait: true })
@connect(mapStateToProps)
class OrderBookComponent extends Component {
  state = { sort: orederBookSort.COURCE };

  classNames = () => {
    const { sort } = this.state;
    return cx({
      'order-book': true,
      [`_by-${sort.toLowerCase()}`]: sort,
    });
  };

  courceClassName = () => {
    const { change } = MOCK_COURCE;

    return cx({
      'order-book__cource': true,
      _up: change > 0,
      _down: change < 0,
    });
  };

  sortByCource = () => {
    this.setState({ sort: orederBookSort.COURCE });
  };

  sortByCell = () => {
    this.setState({ sort: orederBookSort.SELL });
  };

  sortByByu = () => {
    this.setState({ sort: orederBookSort.BUY });
  };

  renderCourceFilter = () => {
    return (
      <div className="order-book__filter _cource" onClick={this.sortByCource}>
        <Icon size={14} name="sort_default" color="#607182" />
      </div>
    );
  };

  renderCellFilter = () => {
    return (
      <div className="order-book__filter _sell" onClick={this.sortByCell}>
        <Icon size={14} name="sort_by" color="#39913a" />
      </div>
    );
  };

  renderBuyFilter = () => {
    return (
      <div className="order-book__filter _buy" onClick={this.sortByByu}>
        <Icon size={14} name="sort_by" color="#e14d38" />
      </div>
    );
  };

  renderCourceChange = () => {
    const { change } = MOCK_COURCE;
    if (change > 0) {
      return <Icon size={8} color="#009902" name="arrow_up" />;
    } else if (change < 0) {
      return <Icon size={8} color="#e14d38" name="arrow_down" />;
    }
    return null;
  };

  renderCource = () => {
    const { price } = MOCK_COURCE;

    return (
      <div className={this.courceClassName()}>
        { price }
        { this.renderCourceChange() }
      </div>
    );
  };

  renderSellOrder = () => {
    return (
      <div className="order-book__list _sell">
        {this.renderTables(MOCK_SELL)}
      </div>
    );
  };

  renderBuyOrder = () => {
    return (
      <div className="order-book__list _buy">
        {this.renderTables(MOCK_BUY)}
      </div>
    );
  };

  renderTables = (data) => {
    return data.map((item) => {
      const id = uuidv4();
      const { price, count, amount, progress } = item;

      return (
        <div className="order-book__list-row" key={id}>
          <div className="order-book__item">
            { formatNumber(price, 3) }
          </div>
          <div className="order-book__item">
            { formatNumber(count, 4) }
          </div>
          <div className="order-book__item">
            { formatNumber(amount, 5) }
          </div>
          <div className="order-book__progress" style={{ width: `${progress}%` }} />
        </div>
      );
    });
  };

  render() {
    const { t } = this.props;

    return (
      <div className={this.classNames()}>
        <div className="order-book__head">
          <div className="order-book__title">
            { t('orderBook.title') }
          </div>

          <div className="order-book__filters">
            {this.renderCourceFilter()}
            {this.renderCellFilter()}
            {this.renderBuyFilter()}
          </div>
        </div>

        <div className="order-book__content">
          <div className="order-book__list-head">
            <div className="order-book__head-item">{ t('orderBook.price') }</div>
            <div className="order-book__head-item">{ t('orderBook.count') }</div>
            <div className="order-book__head-item">{ t('orderBook.amount') }</div>
          </div>
          <div className="order-book__list-body">
            {this.renderSellOrder()}
            {this.renderCource()}
            {this.renderBuyOrder()}
          </div>
        </div>
      </div>
    );
  }
}

export default OrderBookComponent;

Буду признателен за помощь!