HighChart не отображается при использовании защищенных маршрутов в реакции с авторизацией - PullRequest
0 голосов
/ 04 сентября 2018

У меня проблема с Hightchart. В Home.js, когда я объявляю export default HomePage внизу, диаграмма отображается на экране, но когда я объявляю export default withAuthorization (authCondition) (HomePage) диаграмма больше не появляется. Я думаю, что проблема с файлом withAuthorization.js, но я до сих пор не нашел ошибку. Я хочу знать, как решить. Спасибо всем!

Это Home.js

This is Home.js

Код:

import React, { Component } from 'react';

import withAuthorization from './withAuthorization';
import HomeLiveChart from './HomeLiveChart';

class HomePage extends Component {

render() {
return (
    <div id="wrapper">
      <div className="main-content container">
        <div className="row small-spacing">
          <HomeLiveChart />
        </div>  
      </div>
  </div>
);
}
}

const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(HomePage);
//export default HomePage;

Это Chart.js

enter image description here

код:

import React, { Component } from 'react';

class HomeLiveChart extends Component {
    render() {
        return (
            <div>
            <div className="col-xs-6">
                <div className="box-content">
                    <div id="random-temp"></div>
                </div>
            </div>
            <div className="col-xs-6">
                <div className="box-content">
                    <div id="random-humi"></div>
                </div>
            </div>
            </div>
        )
    }
}

export default HomeLiveChart;

Это с Авторизацией.js

enter image description here

Код:

import React from 'react';
import { withRouter } from 'react-router-dom';

import AuthUserContext from './AuthUserContext';
import { firebase } from '../firebase';
import * as routes from '../constants/routes';

const withAuthorization = (authCondition) => (Component) => {
  class WithAuthorization extends React.Component {
    componentDidMount() {
      firebase.auth.onAuthStateChanged(authUser => {
        if (!authCondition(authUser)) {
          this.props.history.push(routes.SIGN_IN);
        }
      });
    }

    render() {
      return (
        <AuthUserContext.Consumer>
          {authUser => authUser ? <Component /> : null}
        </AuthUserContext.Consumer>
      );
    }
  }

  return withRouter(WithAuthorization);
}

export default withAuthorization;

А это AuthUserContext.js

enter image description here

Код:

import React from 'react';

const AuthUserContext = React.createContext(null);

export default AuthUserContext;

Экран при объявлении export default withAuthorization (authCondition) (HomePage) в Home.js, график не появляется

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...