Почему React в сочетании с Firebase несколько раз рендерит на child_added - PullRequest
Новая
       16

Почему React в сочетании с Firebase несколько раз рендерит на child_added

1 голос
/ 21 июня 2019

Я хочу работать с React (hooks) и Firebase, чтобы создать хорошую панель инструментов.Но мне было интересно, почему .on child_added или value вызывается несколько раз внутри компонента класса.Код (index.js): 

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  withRouter,
} from 'react-router-dom';
import PropTypes from 'prop-types';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import './components/App.css';
import App from './components/App';
import Login from './components/Auth/Login';
import Register from './components/Auth/Register';
import Spinner from './components/Spinner/Spinner';
import registerServiceWorker from './registerServiceWorker';
import firebase, { userListListner } from './firebase';

import 'semantic-ui-css/semantic.min.css';
import rootReducer from './reducers';
import { setUser } from './actions';

const store = createStore(rootReducer, composeWithDevTools());
  /**
   * Default routing for project
  */
 const Root = props => {
 const { history, setUser, isLoading } = props;
 const [check, setCheck] = useState(false);

 useEffect(() => {
  if (!check) {
    firebaseCheck();
  }
 }),
  [check];

 /**
  * Check if user is authorised
  */
 const firebaseCheck = () => {
   firebase.auth().onAuthStateChanged(user => {
     if (user) {
       setUser(user);
       history.push('/');
     } else {
       history.push('/login');
    }
     setCheck(true);
   });
 };

 if (check) {
   if (firebase.auth().currentUser) {

     userListListner.child(firebase.auth().currentUser.uid).on('value', snap => 
     {
        console.log('before', snap.val());
     });
     userListListner.off();
   }
 }

  /**
   * Default rout rendering for project
   */
  return !check ? (
    <Spinner />
  ) : (
    <Switch>
      <Route exact path="/" render={() => <App />} />
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
    </Switch>
  );
};

/**
 * map state to props
 */
const mapStateToProps = state => ({
  isLoading: state.user.isLoading,
});

const RootWithAuth = withRouter(
  connect(
    mapStateToProps,
    { setUser }
  )(Root)
);

Root.propTypes = {
  /** Text to render */
  history: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  isLoading: PropTypes.bool,
};

Root.defaultProps = {
  history: null,
  isLoading: null,
};

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <RootWithAuth />
    </Router>
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

По какой-то причине console.log запускается три раза и не может понять, почему это происходит.Я неправильно реализую Firebase или React?

...