Это мой основной компонент, который я рендерю av из базы данных mini mongo. Моя текущая проблема заключается в том, что я отправляю 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);
Спасибо, чувак, я думаю, что это могло быть так.
Пусть ваша функция displayAvList получит аргумент массива от props. Причина, по которой ничего не отображается, заключается в том, что, когда компонент визуализирует, свойства еще не прибыли.
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>
})}
Две вещи, которые стоит попробовать: {this.displayAvCarousel} -> {this.displayAvCarousel ()} (добавить скобки). И createContainer устарел, вы должны использовать withTracker guide.meteor.com/react.html#using-withTracker