Реактивный рендер не обновляется после FirebaseAuth - PullRequest
Новая
       6

Реактивный рендер не обновляется после FirebaseAuth

0 голосов
/ 24 мая 2018

Я хочу передать свой пользовательский uid своему дочернему компоненту, но проблема в том, что метод onAuthStateChanged требует больше времени для получения, чем функция render.И после вызова setState функция рендеринга не будет перерисовываться.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import SP_Quiz from'./SP_Quiz';
import Register from './Register';
import Login from './Login';
import Header from './Header';
import Category from './Category';
import Profile from './Profile';
import {fire} from './Firebase';
var ReactRouter = require('react-router-dom');
var Router = ReactRouter.BrowserRouter;
var Route = ReactRouter.Route;
var Switch = ReactRouter.Switch;

var url = window.location.href.toString().split(window.location.host)[1];
var category = url.substr(6);

var userLang = navigator.language || navigator.userLanguage;
  if ((userLang != 'de') && (userLang != 'jp')) {
    userLang = 'en'
}


class App extends Component {


constructor(props) {
  super(props);
  this.state = {
    userUid : null
  }
  fire.auth().onAuthStateChanged( (user) => {
    if (user) {
      this.setState({
        userUid: user.uid
      })
  })
}

  render(){

    return(
      <Router>
        <div>
          <Header />
          <Switch>
            <Route path='/quiz' render={()=><SP_Quiz category={category} language={userLang}
        user={this.state.userUid} playerProgress="0"/>} />
            <Route path='/register' component={Register} />
            <Route path='/login' component={Login} />
            <Route path='/category' render={()=><Category language="de"/>} />
            <Route path='/profile' component={Profile} />
          </Switch>
        </div>
      </Router>
    );
  }
}


export default App;

Я также пытаюсь выполнить принудительное переопределение после выполнения onAuthStateChaned с помощью this.forceUpdate (), но это также не работает.

1 Ответ

0 голосов
/ 24 мая 2018

Попытайтесь поместить ваш метод onAuthStateChanged не в конструктор, а в метод жизненного цикла, такой как componentDidMount, и сделайте его асинхронным / ожидающим.

Я предполагаю, что этот метод выполняет HTTP-вызов, так чтонекоторая сетевая задержка между отображаемым компонентом и запросом.Поэтому я предполагаю, что ваш метод возвращает Обещание. 

class App extends Component {
  // ES6 make writting a class simpler - don't need 
  // explicitly write constructor. Just a state Object
  state = {
    userid: null
  }

  componentDidMount = async () => { // need an arrow function to bind(this)
    try {
      const user = await fire.auth().onAuthStateChanged()

      if (user) {
        this.setState({
          userUid: user.uid
      })
    } catch (e) {
      console.log(e)
    }
  }

  // rest of your class
}

ПОБОЧНОЕ ПРИМЕЧАНИЕ: вы смешиваете import XXX from 'XXX' с var YYY = require('YYY').Фронтенд должен использовать первый.И это не обязательно, но используйте const везде, кроме случаев, когда вам нужно переназначить, где вы собираетесь использовать let.Забудь var

...