React中useRef获取Swiper实例失效及手动创建报错问题

问题根源分析 #

1. 顶层解构swiper实例的问题：你在组件顶层直接执行const { swiper } = cardElem.current;，组件每次渲染都会重新执行这句代码。但初始渲染时cardElem.current是空值，后续product更新触发重渲染时，Swiper组件可能还未完成实例更新，导致swiper变量无法获取到最新实例，出现后续无法访问的情况。
2. 手动创建Swiper报错原因：你只导入了swiper/react的组件，未导入Swiper核心构造函数，但实际上完全不需要手动创建实例，swiper/react提供的ref已经能满足需求。

修复步骤 #

1. 移除顶层swiper解构：不在组件初始化阶段获取ref内的swiper实例，改为在事件触发时实时获取，确保拿到最新实例。
2. 增加安全判断：在事件处理函数中先判断swiper实例是否存在，避免未初始化时调用方法报错。
3. 调整事件绑定位置：把hover事件绑定到Swiper容器而非单个Slide，避免鼠标在Slide间移动时频繁触发启停，逻辑更合理。

修正后完整代码 #

import React, { useRef, useEffect } from "react";
import { Autoplay, Pagination } from "swiper";
import { Wrapper } from "./card.style";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import { IMG_URL } from "../../utils/Constants";
import { Link } from "react-router-dom";
import { useMainContext } from "../../context/context";

const Card = ({ product }) => {
  const { setShowModal } = useMainContext();
  const cardElem = useRef(null); // 初始值设为null更符合最佳实践

  // 事件触发时实时获取最新swiper实例
  const cardslideStop = () => {
    const swiper = cardElem.current?.swiper;
    if (swiper) {
      swiper.autoplay.stop();
      console.log("stop");
    }
  };

  const cardslideStart = () => {
    const swiper = cardElem.current?.swiper;
    if (swiper) {
      swiper.autoplay.start();
      console.log("start");
    }
  };

  useEffect(() => {
    window.scrollTo(0, document.body.scrollTop);
  }, []);

  return (
    <Link to={`/productdetail/${product?._id}`}>
      <Wrapper>
        <div className="card">
          <div className="card-img">
            {/* 将hover事件绑定到Swiper容器 */}
            <Swiper
              pagination={true}
              modules={[Autoplay, Pagination]}
              slidesPerView={1}
              ref={cardElem}
              className="mySwiper"
              onMouseEnter={cardslideStart}
              onMouseLeave={cardslideStop}
              autoplay={{
                delay: 2000, // 可根据需求调整自动播放间隔
                disableOnInteraction: false,
              }}
            >
              {product?.images.map((curElem, index) => {
                return (
                  <SwiperSlide
                    key={index}
                    style={{
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                  >
                    <img src={IMG_URL + curElem} alt={`产品图片 ${index + 1}`} />
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </div>
          <div className="card-title">
            <h3>{product?.product_name || "68 GSM Xerox A4 Size Paper"}</h3>
          </div>
          <div className="card-price">
            <h3>{"₹ " + product?.product_price || "₹ 220/ Ream"}</h3>
          </div>
          <div className="card-button">
            <button onClick={() => setShowModal(true)}>Enquiry Now</button>
          </div>
        </div>
      </Wrapper>
    </Link>
  );
};

export default Card;

额外优化说明 #

• 新增autoplay配置，确保初始状态下轮播自动运行，可根据需求修改delay参数。
• 将ref初始值设为null，符合React useRef的使用规范。
• 给img标签添加了有意义的alt文本，优化页面可访问性。

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