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不会在状态更改时重新渲染，因此即使状态更新并且回调向其发送了新的子集，OwlCarousel仍像初始渲染一样保持不变。它确实具有回调挂钩，您可以将更新绑定到其中，以便可以使用该更新进行更新，但是它看起来像是非常糟糕的文档，因此我没有花时间在上面。您可以使用一个叫做onRefresh的钩子来接受一个函数，但是没有一个示例可以告诉您如何做。 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

反应猫头鹰转盘是空白的

1 个答案: