React中使用Swiper删除幻灯片报错：swiper.removeSlide不是函数

核心原因 #

removeSlide是Swiper的Manipulation（幻灯片操作）模块提供的方法，这个模块不会默认被导入，必须手动引入才能使用。

解决步骤 #

1. 手动导入Manipulation模块

在你的组件文件（或Swiper初始化的文件）中添加模块导入：

// Swiper 8+版本的导入路径
import 'swiper/modules/manipulation/manipulation';

// 旧版本（如Swiper 7及以下）请用这个路径
// import 'swiper/js/manipulation';

2. 确保Swiper实例就绪后再调用方法

你的代码里用了setTimeout，但仍可能遇到实例未初始化完成的情况，建议结合Swiper的ready事件来确保实例可用，同时记得更新Swiper状态：

import React, { useEffect } from "react";
import { useSwiper } from "swiper/react";
import 'swiper/modules/manipulation/manipulation'; // 导入模块

const DeleteSlide = () => {
  const swiper = useSwiper();

  useEffect(() => {
    const handleSwiperReady = () => {
      setTimeout(() => {
        swiper.removeSlide(0);
        swiper.activeIndex = 0;
        swiper.initialSlide = 0;
        swiper.update(); // 删除幻灯片后必须调用update更新状态
      }, 9000);
    };

    // 绑定ready事件
    swiper.on('ready', handleSwiperReady);
    // 组件卸载时解绑事件
    return () => swiper.off('ready', handleSwiperReady);
  }, [swiper]); // 把swiper加入依赖数组

  return <></>;
};

export default DeleteSlide;

3. 推荐：用React状态管理幻灯片（更符合React数据流）

直接操作Swiper实例容易和React状态不一致，更推荐通过state来控制幻灯片列表：

import React, { useState, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/css';
import 'swiper/modules/manipulation/manipulation';

const MySwiper = () => {
  // 用state管理幻灯片
  const [slideList, setSlideList] = useState([
    { id: 1, content: '第一张幻灯片' },
    { id: 2, content: '第二张幻灯片' },
    { id: 3, content: '第三张幻灯片' },
  ]);

  useEffect(() => {
    setTimeout(() => {
      // 删除第一张幻灯片
      setSlideList(prevList => prevList.slice(1));
    }, 9000);
  }, []);

  return (
    <Swiper>
      {slideList.map(slide => (
        <SwiperSlide key={slide.id}>{slide.content}</SwiperSlide>
      ))}
    </Swiper>
  );
};

export default MySwiper;

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