Реакция совы на карусель пуста - PullRequest
Новая
       34

Реакция совы на карусель пуста

0 голосов
/ 26 июня 2019

Я использую React Сова Карусель для отображения динамической карусели.

Когда я помещаю static html it displays the data properly in carousel, но когда я пытаюсь отобразить dynamic data (используя axios), тогда carousel is always blank.

Примечание :: Я получаю данные, используя axios, и обновляю состояние, которое я использую для зацикливания данных.

Может кто-нибудь объяснить, какую ошибку я здесь сделал, какКарусель всегда остается пустой.

Весь код находится в одном файле:

Мой код :: 

import React, { Component } from 'react';
import HeaderComponent from '../Common/Header';
import SidebarComponent from '../Common/Sidebar';
import TrendingStoriesComponent from './TrendingStories';
import FlashDealsComponent from './FlashDeals';
import WeeklyPicksComponent from './WeeklyPicks';
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

import axios from 'axios';
import moment from 'moment';

class HomeComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            latest_stories: [],
        }
    }

    componentDidMount() {
        axios.get(process.env.REACT_APP_API_ENDPOINT+'/story/latest_stories')
            .then((response) => {
                // handle success
                console.log(response);
                this.setState({
                    latest_stories: response.data.response,
                });
            })
            .catch(error => {
                //Error object contains the response property
                console.log(error);
            });        
    }

    render() {
        return (
            <>

            <HeaderComponent />

            <SidebarComponent />

            <section className="weeklypick mt-4">
                <div className="weeklyslider">
                    <OwlCarousel
                        className="owl-theme"
                        loop
                        margin={10}
                        nav
                    >
                        {
                            this.state.latest_stories.map((story,index) => {
                                console.log(story);//this prints successfully everytime in loop

                                return <div className="item" key={'latest-story-'+index}>
                                    <div className="sliderbox">
                                        <h6>
                                            <span>25 Jan</span>
                                            <img src="assets/images/dropdown.svg" alt="" />
                                        </h6>
                                        <div className="sliderboxfield">
                                            <span className="yellowbadge">Adventures</span>
                                            <img src="assets/images/car1.svg" alt="" />
                                        </div>
                                        <div className="textboxfield">
                                            <p>I Visited Lush’s Biggest Ever Shop & The Treatments Will Truly Blow Your
                                                Mind</p>
                                            <ul>
                                                <li>
                                                    <a href="#">BY SARAH STEVENS</a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <img src="assets/images/heart.svg" alt="" />
                                                        <span className="likecount">3.2k</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            })
                        }
                    </OwlCarousel>

                </div>
            </section>

            </>
        );
    }
}

export default HomeComponent;

1 Ответ

1 голос
/ 26 июня 2019

Похоже, что OwlCarousel не выполняет повторную визуализацию при изменении состояния, и, таким образом, даже если ваше состояние обновляется и ваш обратный вызов отправляет ему новый набор дочерних элементов, OwlCarousel остается таким же, как и при первоначальной визуализации. У него действительно есть обратные вызовы, с которыми вы можете связать свои обновления, чтобы он обновлялся с помощью этого, но, похоже, очень плохая документация, поэтому я не стал тратить на это время. Есть нечто, называемое onRefresh hook, которое вы можете использовать, которое принимает функцию, но опять же нет примера, который бы подсказывал вам, как это сделать. https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

Чтобы преодолеть это, я обернул OwlCarousel в проверку длины, которая будет отображаться только после того, как состояние будет что-то отображать после возврата вызова API. 

        {this.state.latest_stories.length && (
          <OwlCarousel className="owl-theme" loop margin={10} nav>
            {this.state.latest_stories.map((story, index) => {
              console.log(story); //this prints successfully everytime in loop

              return (
                <>
                  <div className="item">
                    <h4>{story}</h4>
                  </div>
                </>
              );
            })}
          </OwlCarousel>
        )}

Вот рабочий пример, основанный на вашем коде: https://codesandbox.io/s/recursing-hooks-gz5gl

...