App stürzt nach Aktualisierung ab

Question

Ich habe ein Problem mit meiner App. Alles ist in Ordnung, bis ich den Refresh-Button drücke. Ich nehme an, dass es passiert, weil einige Sachen noch nicht bereit sind, gerendert zu werden.

import React from 'react' 
 
import { Meteor } from 'meteor/meteor' 
 
import { createContainer } from 'meteor/react-meteor-data' 
 
import { withRouter } from 'react-router' 
 

 
import LeftNavbar from '../dashboard/LeftNavbar' 
 
import UpperBar from '../dashboard/UpperBar' 
 
import NewGreetingsForm from './NewGreetingsForm' 
 
import ConfigureButtons from './ConfigureButtons' 
 

 
import Fanpages from '../../../api/Fanpages.js' 
 

 
import './Greetings.scss' 
 

 
export class Greetings extends React.Component { 
 
    constructor (props) { 
 
    super(props) 
 
    this.fanpage = this.props.user.profile.fanpages 
 

 
    this.state = { 
 
     newGreetingsText: '', 
 
     newGreetingsCharCount: 0 
 
    } 
 
    } 
 

 
    componentDidMount() { 
 
    } 
 

 
    render() { 
 
    const currentFanpage = Fanpages.findOne({fanpageName: this.fanpage}) 
 
    const currentGreeting = currentFanpage.fanpageInfo.fanpageInfo.config.greeting[0].text 
 
    return (
 
     <div className='container page'> 
 
     <UpperBar title={'Konfiguracja fanpage/Zdefiniuj greetings'} /> 
 
     <LeftNavbar /> 
 
     <div className='main-content'> 
 
      <h4 id='main-title'>{this.fanpage}</h4> 
 
      <div className='container'> 
 
      <div className='row'> 
 
       <ConfigureButtons /> 
 
       <div> 
 
       <h5 id='configure-content-right'>Zmień obecną informację</h5> 
 
       <NewGreetingsForm fanpageName={this.fanpage} placeholder={currentGreeting} /> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
export default withRouter(createContainer(() => ({ 
 
    user: Meteor.user() 
 
}), Greetings))

Jede Idee, wo ich diese Variablen von Render-Methode bewegen sollte? So funktioniert es wie nach der Seitenaktualisierung? Vielen Dank für Ihre Teilnahme.

Answer 1

Angenommen, es ist Abonnementverwaltung über dieser Komponente geht man nur verteidigen können gegen die Daten nicht bereit zu sein:

render() { 
    const currentFanpage = Fanpages.findOne({fanpageName: this.fanpage}); 
    if (!currentFanpage) { 
    return (
     <div /> 
    ); 
    } else { 
    const currentGreeting = currentFanpage.fanpageInfo.config.greeting[0].text 
    return (
     // your html 
    ) 
    } 
} 

Noch besser wäre es, haben die übergeordnete Komponente einer Schleuder machen, bis das Abonnement .ready()

ist Aktualisieren Sie haben nach der Verwendung von createContainer mit withRouter gefragt. Ich normalerweise nicht withRouter verwenden und ich habe nicht getestet, aber es sollte so etwas wie gehen: Seine

const container =() => { 
    const sub = Meteor.subscribe('mysub'); 
    const loading = sub.ready(); 
    const user = Meteor.user(); 
    return { loading, user }; 
} 

export default withRouter(container, Greetings)) 

Das Wichtigste ist, dass der Behälter einen loading Schlüssel, die den Zustand des Abonnements gebunden ist.

Container tutorial