ReactJS WebSocket结果由i18n翻译

Question

我有一个ReactJS Webapp，我在其中使用webscokets从API检索报价价格。当我的webapp独立运行时，您可以在下图中看到它。

但是，当我尝试将其合并到具有i18n本地化功能的主要React Web应用程序中时，无论我做什么，都会得到此结果。似乎卡在了数组之类的东西中。也许有人知道我该如何解决这个问题？

import React from 'react'
import axios from 'axios'
import { connect } from 'react-redux'
import Loading from '../elements/Loading'
import Ticker from './Ticker'
import TradeHistory from './TradeHistory'
import OrderBook from './OrderBook'

class Trade extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoaded: false
        };
        this.tradesCount = 20;
        this.streams = ['@ticker','@depth20','@trade'];
    }

    _connectSocketStreams(streams) {
        streams = streams.join('/');
        let connection = btoa(streams);
        this[connection] = new WebSocket(`wss://stream.binance.com:9443/stream?streams=${streams}`);
        this[connection].onmessage = evt => {
            let eventData = JSON.parse(evt.data);
            if(eventData.stream.endsWith('@ticker')){
                eventData.data.lastc = this.state.ticker ? this.state.ticker.c : 0
                this.props.dispatch({
                    type: 'SET_TICKER',
                    data: eventData.data
                })
                this.setState({
                    loadedTicker: true
                })
            }
            if(eventData.stream.endsWith('@trade')){
                if(this.props.trades && Object.keys(this.props.trades).length > 0){
                    let trades = this.props.trades;
                    trades.push(eventData.data);
                    trades = trades.slice(-1*this.tradesCount);
                    this.props.dispatch({
                        type: 'SET_TRADES',
                        data: trades
                    })
                    this.setState({
                        loadedTrades: true
                    })
                }
            }
            if(eventData.stream.endsWith('@depth20')){
                this.props.dispatch({
                    type: 'SET_DEPTH',
                    data: eventData.data
                })
                this.setState({
                    loadedDepth: true
                })
            }
            this.setState({
                isLoaded: true
            })
        };
        this[connection].onerror = evt => {
            console.error(evt);
        }
    }

    _disconnectSocketStreams(streams){
        streams = streams.join('/');
        let connection = btoa(streams);
        if (this[connection].readyState === WebSocket.OPEN) {
            this[connection].close();
        }
    }

    componentDidMount() {

        let symbol = this.props.match.params.symbol.toLowerCase();
        this._connectSocketStreams(this.streams.map(i => `${symbol}${i}`));

        axios({
            method: 'get',
            url: `https://cors-anywhere.herokuapp.com/https://www.binance.com/api/v1/aggTrades?limit=${this.tradesCount}&symbol=${this.props.match.params.symbol}`
        })
        .then(response => {
            this.props.dispatch({
                type: 'SET_TRADES',
                data: response.data
            })
            this.setState({
                isLoaded: true,
                loadedTrades: true
            })
        })
        .catch(error => {
            this.setState({
                isLoaded: false,
                error: error
            })
        });
    }

    componentWillUnmount() {
        let symbol = this.props.match.params.symbol.toLowerCase();
        this._disconnectSocketStreams(this.streams.map(i => `${symbol}${i}`))
    }

    render() {
        const { error, isLoaded, loadedDepth, loadedTicker, loadedTrades } = this.state;
        if (error) {
          return <div className="alert alert-danger">{error.message}</div>;
        }
        if (!isLoaded) {
          return <Loading />;
        }
        return (
            <React.Fragment>
                <div className="row">
                    <div className="col-12">{loadedTicker ? <Ticker {...this.props.ticker} /> : <Loading />}</div>
                </div>
                <div className="row">
                    <div className="col-12 col-sm-6">{loadedTrades ? <TradeHistory trades={this.props.trades}/> : <Loading />}</div>
                </div>
            </React.Fragment>
      )
    }

}

export default connect(
    state => state
)(Trade)