保存时钩子调用无效，使用鼠标滑块时未进行编辑

我已经安装了swiper slider（react版本）并创建了一个自定义块。当我在后端添加块时，它工作得很顺利，我可以很好地滑动。但当我在前端保存和查看时，什么都不会出现。在后端刷新后检查错误消息时，我看到以下消息：

未捕获错误：钩子调用无效。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下：

您可能有不匹配的React版本和渲染器（如React DOM）

您可能违反了挂钩规则，您可能在同一个应用程序中有多个React副本

import { registerBlockType } from "@wordpress/blocks";
import { useBlockProps } from "@wordpress/block-editor";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

import "./editor.scss";
import "./style.scss";

import json from "./block.json";
import { __ } from "@wordpress/i18n";
const { name, ...settings } = json;

registerBlockType(name, {
    ...settings,
    edit: (props) => {
        return (
            <div {...useBlockProps()}>
                <Swiper
                    spaceBetween={50}
                    slidesPerView={3}
                    onSlideChange={() => console.log("slide change")}
                    onSwiper={(swiper) => console.log(swiper)}
                >
                    <SwiperSlide>Slide 1</SwiperSlide>
                    <SwiperSlide>Slide 2</SwiperSlide>
                    <SwiperSlide>Slide 3</SwiperSlide>
                    <SwiperSlide>Slide 4</SwiperSlide>
                </Swiper>
            </div>
        );
    },
    save: () => {
        return (
            <div {...useBlockProps.save()}>
                <Swiper spaceBetween={50} slidesPerView={3}>
                    <SwiperSlide>Slide 1</SwiperSlide>
                    <SwiperSlide>Slide 2</SwiperSlide>
                    <SwiperSlide>Slide 3</SwiperSlide>
                    <SwiperSlide>Slide 4</SwiperSlide>
                </Swiper>
            </div>
        );
    },
});

<div class="swiper">  <div class="swiper-wrapper">  <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div>  <div class="swiper-pagination"></div>  <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div>  <div class="swiper-scrollbar"></div> </div>

相关推荐