React owl 轮播是空白的

Question

我正在使用 React owl carousel 来显示动态轮播。

当我放置 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;

Answer 1

OwlCarousel 似乎不会 re-render 状态更改，因此即使您的状态更新并且您的回调向它发送了一组新的子项，OwlCarousel 仍然保持原样，就像初始渲染一样。它确实有回调挂钩，您可以将更新绑定到其中，以便它会使用它进行更新，但看起来文档很差，所以我没有花时间在上面。有一个叫做 onRefresh 的钩子，你可以使用它接受一个函数，但同样没有例子告诉你如何去做。 https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

为了克服这个问题，我将 OwlCarousel 包装在长度检查中，它只会在 API 调用 returns 之后呈现状态时呈现。

        {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

React owl 轮播是空白的

React owl carousel is blank

javascript

carousel

reactjs

owl-carousel