Reactjs swiper 无法正常启动 - 错误“TypeError：无法将未定义或 null 转换为对象”答案

【问题标题】：Reactjs swiper not starting properly - error "TypeError: Cannot convert undefined or null to object"Reactjs swiper 无法正常启动 - 错误“TypeError：无法将未定义或 null 转换为对象”
【发布时间】：2022-10-18 21:33:28
【问题描述】：

我正在使用 Swiperjs 制作画廊，但它在初始化时“展示”了整个应用程序。如果我记得，我从他们的网站 (https://codesandbox.io/s/fbs9e8?file=/src/App.jsx) 复制/粘贴了代码并对其进行了调整。我认为是因为最初的useState为null，但我不知道如何解决它。任何帮助将不胜感激。

import React, { useEffect, useRef, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Navigation, Thumbs, Autoplay, Controller, Pagination } from "swiper";
import { Image } from '@chakra-ui/react';
// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "swiper/css/zoom";
import "swiper/css/autoplay";
import "swiper/css/pagination";

import "./galleryStyles.css";

export default function Gallery({ item }) {
    const [thumbsSwiper, setThumbsSwiper] = useState(null);

    const displayImages = () => {
        return (
            <>
                {
                    item.postImageURLs && item.postImageURLs !== undefined ?
                        item.postImageURLs.map((img, index) => {
                            // console.log(img)
                            return (
                                <SwiperSlide key={index}>
                                    <Image src={`${img}`} />
                                </SwiperSlide>
                            )
                        })
                        : "no pics to show"
                }
            </>
        )
    }

    return (
        <>
            <Swiper
                style={{
                    'height': '25vh',
                    "--swiper-navigation-color": "#fff",
                    "--swiper-pagination-color": "#fff",
                }}
                loop
                speed={400}
                // spaceBetween={10}
                navigation={true}
                autoplay={true}
                pagination={{
                    type: "progressbar",
                }}
                modules={[FreeMode, Navigation, Thumbs, Autoplay, Pagination]}
                thumbs={{ swiper: thumbsSwiper }}//FIXME: there is s aproblem at initiation that the state is null

                onSwiper={setThumbsSwiper}
            // controller={{ control: secondSwiper }}
            >
                {displayImages()}
            </Swiper>
            <Swiper
                onSwiper={setThumbsSwiper}
                autoplay={{
                    delay: 0.01,
                    // disableOnInteraction: true
                }}
                speed={2000}
                loop={true}
                spaceBetween={10}
                slidesPerView={8}
                freeMode={true}
                watchSlidesProgress={true}
                modules={[FreeMode, Navigation, Thumbs, Autoplay]}
                className="mySwiper"
                style={{
                    'maxHeight': '8vh'
                }}

            >
                {displayImages()}
            </Swiper>
        </>
    );
}

我得到的错误是： TypeError - click to see the printscreen

【问题讨论】：

您在 2 个滑块中共享了 setThumbsSwiper 和 thumbsSwiper。您能否创建一个新状态，以便 2 个滑块可以分别使用它们？
你是怎么解决这个问题的？ @汤姆
你是如何解决这个问题的，因为我在这里遇到了同样的问题

标签： reactjs dictionary typeerror swiper.js

【解决方案1】：

我解决了：只需更改

thumbs={{ swiper: thumbsSwiper }}

至

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

而已。

【讨论】：