javascript - 数据完全渲染时的 React/Meteor 初始化函数

Question

我确实有以下 React 组件，它订阅 MongoDB，从中加载图像并返回页面。

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 函数可以成功初始化轮播类，但看起来数据加载速度比轮播初始化更快，并且认为图像嵌套在轮播 slider 之外。

Answer 1

您的订阅尚未准备好，并且您的轮播功能在订阅所有数据之前触发，这就是您遇到错误的原因。

您必须确保您完全订阅了您的收藏。尝试创建一个响应式(Reactive)容器，设置一些 session 变量并正确订阅(通过 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() 组件中:

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() 方法中，并以响应式方式包装，以便在数据实际准备好/订阅时触发。