流星反应猫头鹰旋转木马

Question

这是我的主要组件，我从迷你mongo db渲染av。 我目前的问题是当我将 this.props.av 发送到轮播中时，它不会加载。我确实注意到道具仅在某些组件重新渲染自身后才可见。在显示中，如果我传递 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);

Answer 1

让你的 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>
})}