React Swiper双轮播同步索引实现及报错解决求助

错误原因分析 #

你遇到的TypeError: Cannot read properties of undefined (reading '2')主要来自两个核心问题：

1. Swiper实例赋值完全搞反：第一个Swiper的onSwiper绑定了setSecondSwiper，第二个Swiper绑定了setFirstSwiper，导致控制器引用的实例完全错误，初始化时找不到有效实例引发报错。
2. 初始null值直接传入controller：组件首次渲染时，两个Swiper实例还未创建，firstSwiper和secondSwiper都是null，直接传给controller.control会导致Swiper内部尝试读取未定义的属性。

修正后的代码 #

import React, { useState } from "react";
import { Controller } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectFade, Autoplay } from "swiper";
import "swiper/css";
import "swiper/css/effect-fade";

export function Service() {
  const [firstSwiper, setFirstSwiper] = useState<any>(null);
  const [secondSwiper, setSecondSwiper] = useState<any>(null);

  return (
    <div className="w-full border-b-2 border-b-stone-500">
      <div className="container max-w-7xl mx-auto mt-20 p-8 flex flex-row">
        {/* 第一个Swiper */}
        <Swiper
          spaceBetween={30}
          loop={true}
          centeredSlides={true}
          speed={1000}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          effect={"fade"}
          modules={[Autoplay, EffectFade, Controller]}
          // 仅当secondSwiper存在时才设置控制器
          controller={secondSwiper ? { control: secondSwiper } : undefined}
          className="basis-1/2 p-12 max-w-md"
          style={{ padding: 12 }}
          // 绑定正确的实例 setter
          onSwiper={setFirstSwiper}
        >
          <SwiperSlide>
            <div className="flex flex-row">
              <img
                className="aspect-square p-1 rounded-full ring-4 ring-gray-300 dark:ring-gray-500"
                src="/images/Classic3.jpg"
                alt="slide 3"
              />
              <div>slide 3</div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="flex flex-row">
              <div>
                <img
                  className="aspect-square p-1 rounded-full ring-4 ring-gray-300 dark:ring-gray-500"
                  src="/images/Combination_brows.jpg"
                  alt="slide 4"
                />
              </div>
              <div>slide 5</div>
            </div>
          </SwiperSlide>
        </Swiper>

        {/* 第二个Swiper */}
        <Swiper
          spaceBetween={50}
          centeredSlides={true}
          loop={true}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          speed={1000}
          modules={[Autoplay, Controller]}
          // 仅当firstSwiper存在时才设置控制器
          controller={firstSwiper ? { control: firstSwiper } : undefined}
          className="basis-1/2 self-center content-center"
          style={{ padding: 12 }}
          // 绑定正确的实例 setter
          onSwiper={setSecondSwiper}
        >
          <SwiperSlide>
            <div className="flex flex-row">
              <img
                className="aspect-square p-1 rounded-full ring-4 ring-gray-300 dark:ring-gray-500"
                src="/images/Classic3.jpg"
                alt="slide 3"
              />
              <div>slide 3</div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="flex flex-row">
              <div>
                <img
                  className="aspect-square p-1 rounded-full ring-4 ring-gray-300 dark:ring-gray-500"
                  src="/images/Combination_brows.jpg"
                  alt="slide 4"
                />
              </div>
              <div>slide 5</div>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
  );
}

关键修正点 #

• 修正实例绑定：将第一个Swiper的onSwiper改为setFirstSwiper，第二个改为setSecondSwiper，确保控制器引用的是正确的实例。
• 条件化控制器：通过controller={secondSwiper ? { control: secondSwiper } : undefined}避免初始null值传入控制器，防止初始化时报错。
• 保持loop同步：由于两个Swiper都开启了loop: true，修正实例引用后，Controller模块会自动处理循环模式下的索引同步，无需额外配置。

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