React/Meteor Init-Funktion, wenn Daten vollständig gerendert werden

Question

Ich habe die folgende React Component, die abonniert MongoDB lädt die Bilder von ihm und kehrt zu der Seite zurück.

export default class Portfolio extends TrackerReact(React.Component) { 

    constructor(props) { 
    super(props); 
    this.state = { 
     subscription: { 
     albumbs: Meteor.subscribe('albums') 
     } 
    } 
    } 

    componentWillUnmount() { 
    this.state.subscription.albums.stop(); 
    } 

    albums() { 
    return Albums.find().fetch(); 
    } 

    render() { 

    function init() { 
     $('.carousel').flickity({ 
     // options 
     "lazyLoad": true 
     }); 
    }; 



    return (
     <ReactCSSTransitionGroup component='div' className='carousel' transitionName='postLoad' transitionLeaveTimeout={2000} transitionEnterTimeout={2000}> 
     {this.albums().map((album) => { 
     return <div className='carousel-cell' key={album._id}><AlbumCover albums={album} /></div> 
     })} 
     {init()} 
    </ReactCSSTransitionGroup> 
    ); 
    } 
} 

Die aktuelle Funktion init startet erfolgreich init Karussell Klassen, aber es sieht aus wie die Daten schneller geladen wird dann das Karussell inited und dachte Bilder außerhalb des Karussells Schieber verschachtelt.

Answer 1

Ihr Abonnement ist noch nicht fertig und Ihre Karussellfunktion löst aus, bevor alle Daten abonniert wurden. Deshalb haben Sie den Fehler.

Sie müssen sicherstellen, dass Sie Ihre Sammlung vollständig abonniert haben. Versuchen Sie, einen reaktiven Container zu erstellen, richten Sie ein paar Session-Variablen und abonnieren richtig (Importcontainer über import {createContainer} from 'meteor/react-meteor-data'):

export default createContainer(() => { 
    const subscription = Meteor.subscribe('albums'); 
    subscription.ready() ? Session.set("subReady", true) : Session.set("subReady", false); 

    return{ 
    album: Albums.find().fetch(), 
    } 
}, Portfolio); 

dann in Ihrem render() Komponente:

render(){ 
    if(Session.get("subReady")){ 
    return (
    <ReactCSSTransitionGroup component='div' className='carousel' transitionName='postLoad' transitionLeaveTimeout={2000} transitionEnterTimeout={2000}> 
     {this.albums().map((album) => { 
     return <div className='carousel-cell' key={album._id}><AlbumCover albums={album} /></div> 
     })} 
     {init()} 
    </ReactCSSTransitionGroup> 
    ); 
} 
} 

und nicht zu vergessen, fügen Sie den Karussell-Code in Ihrer componentDidMount() Methode:

componentDidMount(){ 
    if(Session.get("subReady")){ 
    function init() { 
    $('.carousel').flickity({ 
    // options 
    "lazyLoad": true 
    }); 
}; 
    } 
} 

ich diesen Code nicht auf meinem Computer testen, aber hoffentlich funktioniert es für Sie aus.

Wenn Sie Ihre Methode der zeichn verwenden möchten, dann stellen Sie sicher, dass:

1) Das Abonnement bereit ist.

2) Stellen Sie sicher, dass Ihr Karussell-Code in Ihrer componentDidMount()-Methode ist und in eine reaktive Weise gewickelt ist, um auszulösen, wenn die Daten tatsächlich bereit/abonniert sind.