Question

这是我从mini mongo db渲染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);

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>

 })}

流星Reactjs猫头鹰轮播

1 个答案: