データが完全にレンダリングされたときのReact/Meteor init関数

Question

MongoDBを購読してそこから画像を読み込んでページに戻るReact Componentがあります。

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> 
    ); 
    } 
} 

現在のinit関数は、成功したのinitカルーセルクラスになりますが、カルーセルはinitedとカルーセルスライダーの外にネストされている画像を考えている、データをより高速にロードされるように見えます。

Answer 1

サブスクリプションがまだ準備されていないため、すべてのデータを購読する前にカルーセル機能が起動しているため、エラーが発生しています。

あなたがあなたのコレクションを完全に購読していることを確認する必要があります。 （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); 

：

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> 
    ); 
} 
} 

ないが、忘れては、あなたのcomponentDidMount()方法でカルーセルのコードを追加します。

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

私は自分のコンピュータ上でこのコードをテストしていない、うまくいけば、それはあなたのために動作します。

あなたが加入するのあなたの方法を使用する場合は、ことを確認してください：サブスクリプションの準備ができている

1）。

2）カルーゼルコードがcomponentDidMount()メソッドに含まれていることを確認し、データが実際にレディ/購読の準備ができているときにトリガーするようにしてください。