React Owl Carousel 2.3.3刷新页面后动态数据丢失问题求助

• react-owl-carousel 组件会在首次渲染时就完成轮播的初始化配置，固定识别当前的子元素列表。页面刷新时fetch请求为异步执行，初始state中data是空值，此时Owl Carousel已经初始化完成，等后续接口返回数据更新state后，轮播组件不会自动重新扫描子元素重新初始化，就会出现轮播可滑动但无动态内容的问题。
• 初始state的data默认值为undefined，首次渲染时轮播子项只有"SLIDE NOT FOUND"的h1标签，后续data更新后轮播没有同步刷新。

方案1：添加key属性强制Owl Carousel在数据加载完成后重新渲染 #

给OwlCarousel组件绑定key，值为数据长度或者数据加载完成的标识，数据变化后key更新，React会销毁旧的轮播组件重新初始化新实例，就能正确识别动态子项。修改代码如下：

return (
  <>
    {/* 新增key属性，data存在时key为数据长度，不存在时为0 */}
    <OwlCarousel key={data?.length || 0} 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>
  </>
);

方案2：等待数据加载完成后再渲染Owl Carousel组件 #

不要初始就渲染轮播，等接口返回data之后再渲染轮播组件，避免组件提前初始化。修改代码如下：

return (
  <>
    {/* 只有data存在时才渲染轮播组件 */}
    {data ? (
      <OwlCarousel className="owl-theme" loop margin={10} nav>
        {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>
    ) : (
      <h1>"SLIDE NOT FOUND"</h1>
    )}
  </>
);

可选优化 #

可以将初始state的data默认值设为空数组，避免处理undefined判断逻辑：

const initialState = {
  data: []
};

内容的提问来源于stack exchange，提问作者user16511963