Meteor Reactjs Сова Карусель - PullRequest
Новая
       12

Meteor Reactjs Сова Карусель

0 голосов
/ 05 сентября 2018

Это мой основной компонент, который я рендеринг AV из мини-монго ДБ. Моя текущая проблема - когда я отправляю this.props.av в карусель, он не загружается. Я заметил, что реквизит виден только после того, как компонент перерисовывает себя сам. В displayAvCarousel, если я передам массив avCarouselList Карусель будет работать без проблем. Но когда я меняю статический массив на массив из бэкэнда, возникает проблема с загрузкой карусели. Я не уверен, что проблема может быть. Я думал, что данные не загружаются с компонентом на монтировании. Какие-либо предложения. Спасибо 

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Carousel } from 'react-responsive-carousel';
import AV from './AV';

class FullAVList extends Component {
  constructor(props) {
  }
  displayAvList() {
    let avList = this.props.av;

    return avList.map((av) => {
     return <AV key={av._id} av={av} />;
    });
  }
  // filter sponsored events
  displayAvCarousel(){

    const avCarouselList = [
      {
        id: 1,
        img: "./images/av-img-header.jpg",
        s: false,
      },
      {
        id: 2,
        img: "./images/av-img-header.jpg",
        s: true,
      },
    ];


    let avFilters = this.props.av.filter((av) => av.s == true);

    return this.props.av.map((av) => {
      return (
        <div>
          <img src={av.img} />
        </div>
      );
    });
  }

  render() {
    return (
      <div>
        <Carousel showArrows={true} legend={false} showThumbs={false} infiniteLoop={true} swipeable={true}>
          {this.displayAvCarousel}
        </Carousel>
        {this.displayAvList()}
      </div>
    );
  }
}

export default createContainer(() => {
  Meteor.subscribe('autoevents');

  return {
    av: AV.find({ av: true }, { sort: { createdAt: -1 } }).fetch(),
  };
}, FullAVList);

1 Ответ

0 голосов
/ 05 сентября 2018

Пусть ваша функция displayAvList получит аргумент массива из реквизита. Причина, по которой ничего не отображается, заключается в том, что когда компонент рендерит, реквизит еще не прибыл. 

 render(){
 const {av} = this.props;
   // av represents your array which you can pass to the 
    // function displayAvList
 return (
    Carousel showArrows={true} legend={false} 
     showThumbs={false} infiniteLoop={true} swipeable= 
    {true}>
      {this.displayAvCarousel}
       {this.displayAvList(av)
    </Carousel>

 })}
...