React Owl Carousel 2.3.3 - 刷新页面后我丢失了动态数据。在本地数据上运行良好

Question

我正在使用 json-server 并使用 fetch 获取数据。我第一次在 Owl 轮播中正确获取数据并且滑块工作正常但是当我刷新页面后我所有的动态数据都消失了。我的轮播仍在滑动，但没有数据。另外，我在 index.html 中附加了一个 jquery 脚本 https://code.jquery.com/jquery-3.2.1.slim.min.js。我丢失了 Owl 轮播动态数据，我在 Owl 轮播组件中通过 map 方法使用它。下面是我使用滑块的代码。请帮助我找到我做错的地方。谢谢。

---------------
<<<<<- Below code is MainSlider.js ->>>>>

    import React, { useReducer, useEffect } from "react";
    import OwlCarousel from "react-owl-carousel";
    import "owl.carousel/dist/assets/owl.carousel.css";
    import { mainSliderReducer } from "../reducers/mainSliderReducer";
    
    const API = "http://localhost:8000/mainSlider";
    
    const initialState = {};
    
    const MainSlider = () => {
      const [state, dispatch] = useReducer(mainSliderReducer, initialState);
      const { data } = state;
    
      useEffect(() => {
        getData();
      }, []);
    
      const getData = () => {
        fetch(API)
          .then((res) => {
            if (res.ok) {
              return res.json();
            } else {
              console.log("DATA NOT FOUND. SOME ERROR");
              throw new Error("ERROR FETCHING DATA");
            }
          })
          .then((data) => dispatch({ type: "GET_MAINSLIDER_DATA", payload: data }))
          .catch((err) => console.log(err));
      };
    
      console.log(data);
    
      return (
        <>
          <OwlCarousel className="owl-theme" loop margin={10} nav>
            {data ? (
              data.map((item) => {
                const { id, heading, description, img, smallHeading } = item;
                return (
                  <section key={id} className="dvMainSlider">
                    <div className="item bg bgcolor1 pb-md-5 pt-md-4 py-xl-0 h-100vh h-sm-auto h-xl-100vh">
                      <div className="container">
                        <div className="row slideInfo h-xl-100vh align-items-xl-center">
                          <div className="col-md-6 text-center">
                            <img
                              src={img}
                              className="img-fluid d-inline-block"
                              alt=""
                            />
                          </div>
                          <div className="col-md-6 pt-lg-5 pt-xl-0 description">
                            <h1 className="text-white">{heading}</h1>
                            <h4 className="text-white">{smallHeading}</h4>
                            <p className="text-white">{description}</p>
                            <a href="--" className="btn btnPrimary mb-3 mt-sm-3">
                              Shop More
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                );
              })
            ) : (
              <h1>"SLIDE NOT FOUND"</h1>
            )}
          </OwlCarousel>
        </>
      );
    };
    
    export default MainSlider;

    
    <<<<<- Below code is mainSliderReducer.js ->>>>>
   
    export const mainSliderReducer = (state, action) => {
      console.log(state, action);
      switch (action.type) {
        case "GET_MAINSLIDER_DATA":
          return { ...state, data: action.payload };
        default:
          return state;
      }
    };

Answer 1

嘿，我找到了我自己的问题的答案，我找到了与大家分享的方式。只需检查数据是否可用，然后才加载 Owl 轮播组件。查看下面的代码以便更好地理解。

{data && (
        <OwlCarousel {...options}>
          {data.map((item) => {
            const { id, heading, description, img, smallHeading } = item;
            return (
              <section key={id} className="dvMainSlider">
                <div className="item bg bgcolor1 pb-md-5 pt-md-4 py-xl-0 h-100vh h-sm-auto h-xl-100vh">
                  <div className="container">
                    <div className="row slideInfo h-xl-100vh align-items-xl-center">
                      <div className="col-md-6 text-center">
                        <img
                          src={img}
                          className="img-fluid d-inline-block"
                          alt=""
                        />
                      </div>
                      <div className="col-md-6 pt-lg-5 pt-xl-0 description">
                        <h1 className="text-white">{heading}</h1>
                        <h4 className="text-white">{smallHeading}</h4>
                        <p className="text-white">{description}</p>
                        <a href="--" className="btn btnPrimary mb-3 mt-sm-3">
                          Shop More
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            );
          })}
        </OwlCarousel>
      )}

React Owl Carousel 2.3.3 - 刷新页面后我丢失了动态数据。在本地数据上运行良好

React Owl Carousel 2.3.3 - I loose dynamic data after refreshing page. Working fine on local data

reactjs

owl-carousel