反應貓頭鷹轉盤是空白的

Question

我正在使用React owl輪播來顯示動態輪播。

當我放置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