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函数创建了成功的init carousel类，但看起来数据的加载速度比旋转木马更快，思想图像嵌套在旋转木马滑块之外。

Answer 1

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

您必须确保完全订阅了您的收藏。尝试创建一个反应容器，设置一些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()方法中，并且在数据实际准备好/订阅时以被动方式包装。

完全呈现数据时的React / Meteor初始化函数

1 个答案: