流星Reactjs猫头鹰旋转木马

Question

这是我从mini mongo db渲染av的主要组件。我当前的问题是当我将this.props.av发送到它没有加载的轮播时。我注意到只有部分组件重新渲染后才能看到道具。在displayAvCarousel中如果我传递avCarouselList数组轮播将没有问题。但是我从静态数组更改为后端的数组，加载轮播有一个问题。我不确定问题是什么。我当时认为数据没有加载到mount上的组件。有什么建议。谢谢

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>

 })}