当React Swiper和NextJS一起使用时无效的钩子调用

Question

我试图使用swiper与NextJS，但最简单的例子是导致无效的钩子调用。我试着把刷屏版本降级到7，但是没有成功。

这是我的package.json

"dependencies": {
"clsx": "^1.1.1",
"next": "12.1.6",
"next-sanity": "^0.5.2",
"next-sanity-extra": "^0.2.3",
"react": "18.1.0",
"react-dom": "18.1.0",
"sanity-react-extra": "^0.2.4",
"swiper": "^8.2.4",
"zustand": "^4.0.0-rc.1"
},
"devDependencies": {
"@types/node": "17.0.38",
"@types/react": "18.0.10",
"@types/react-dom": "18.0.5",
"autoprefixer": "^10.4.7",
"eslint": "8.16.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.14",
"tailwindcss": "^3.0.24",
"typescript": "4.7.2"
}

这是swiper组件

import React from "react";
import { HomHeroProps } from "@lib/@types/home.types";
import { Swiper, SwiperSlide } from "swiper/react";
export const Hero: React.FC<HomHeroProps> = ({ carousel, description }) => {
return (
<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>
</Swiper>
);
};

Answer 1

暂时修复，降级为react 17