Swiper React 无法将 undefined 或 null 转换为对象答案

【问题标题】：Swiper React cannot convert undefined or null to objectSwiper React 无法将 undefined 或 null 转换为对象
【发布时间】：2022-08-02 16:14:19
【问题描述】：

我正在使用 Swiper 库来显示图像幻灯片和缩略图。每当我单击特定缩略图时，映射到单击的缩略图的图像应显示在视图中。

import { Swiper, SwiperSlide } from \"swiper/react\";
import { Navigation, Thumbs } from \"swiper\";
import \"swiper/css\";
import \"swiper/css/navigation\";
import \"swiper/css/thumbs\";
import \"./swiper.css\";
const SwiperImage = () => {
  const [activeThumb, setActiveThumb] = React.useState();
  return (
    <>
      <Swiper
        loop={true}
        spaceBetween={10}
        navigation={true}
        modules={[Navigation, Thumbs]}
        grabCursor={true}
        thumbs={{ swiper: activeThumb }}
        className=\"vehicle-image-slider\"
      >
        {images.map((item, index) => (
          <SwiperSlide key={index}>
            <img src={item} alt=\"lamborgini image\" />
          </SwiperSlide>
        ))}
      </Swiper>
      <Swiper
        onSwiper={setActiveThumb}
        loop={true}
        spaceBetween={10}
        slidesPerView={4}
        modules={[Navigation, Thumbs]}
        className=\"vehicle-image-slider-thumbs\"
      >
        {images.map((item, index) => (
          <SwiperSlide key={index}>
            <div className=\"thumbs-wrapper\">
              <img src={item} alt=\"lamborgini image\" />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </>
  );
};

我尝试使用 onSwiper 道具来实现此功能，但遇到了错误。

thumbs.js:67 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.assign (<anonymous>)
    at Object.init (thumbs.js:67:1)
    at updateSwiper (update-swiper.js:92:1)
    at swiper.js:158:1
    at commitHookEffectLi

根据文档，我似乎找不到我的代码有任何问题。

可能是一个，但在图书馆里，this issue 中有解决方法
在我的反应应用程序中删除严格模式后，它可以工作。但是，我认为这不是解决问题的好方法。

标签： reactjs swiper.js

【解决方案1】：

添加这个。

thumbs={{swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null}}

【讨论】：