Все добрый день. Есть модуль сайта, который динамически получает данные через ВебСокеты. Вопрос, как вызвать рендер, что бы данные обновились?...
Часть кода:
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;
Буду признателен за помощь!