Swiper 组件在 React 中不起作用并抛出错误答案

【问题标题】：Swiper Component not working in React and throwing ErrosSwiper 组件在 React 中不起作用并抛出错误
【发布时间】：2022-08-06 13:03:12
【问题描述】：

因此，我正在关注 Traversy Media 的一门名为“React Front To Back 2022”的课程，在第 5 和第 6 视频课程的第 16 部分，他正在使用 Swiper 组件。我是一步步跟着的，但最后还是报错了，所以经过一番思考和谷歌搜索后，我决定看看他发布的项目的GitHub存储库的解决方案，我比较了代码，似乎同样，我复制了它，但它仍然抛出错误并且没有呈现页面。

我无法在任何地方（谷歌、文档、youtube 等）找到修复程序，所以希望有人可以在这里帮助我。预先感谢您的帮助。

错误：

init-swiper.js:25 Uncaught TypeError: Cannot read properties of undefined (reading \'pagination\')
at mountSwiper (init-swiper.js:25:1)
at swiper.js:136:1
at commitHookEffectListMount (react-dom.development.js:23049:1)
at invokeLayoutEffectMountInDEV (react-dom.development.js:25010:1)
at invokeEffectsInDev (react-dom.development.js:27304:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27280:1)
at flushPassiveEffectsImpl (react-dom.development.js:27007:1)
at flushPassiveEffects (react-dom.development.js:26935:1)
at performSyncWorkOnRoot (react-dom.development.js:26032:1)
at flushSyncCallbacks (react-dom.development.js:12009:1)

react_devtools_backend.js:4026 The above error occurred in the <Swiper> component:

at http://localhost:3000/static/js/bundle.js:131862:66
at Slider (http://localhost:3000/static/js/bundle.js:1549:66)
at main
at div
at Explore
at Routes (http://localhost:3000/static/js/bundle.js:120121:24)
at Router (http://localhost:3000/static/js/bundle.js:120046:30)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:118774:23)
at App

Uncaught TypeError: Cannot read properties of undefined (reading \'pagination\')
at mountSwiper (init-swiper.js:25:1)
at swiper.js:136:1
at commitHookEffectListMount (react-dom.development.js:23049:1)
at invokeLayoutEffectMountInDEV (react-dom.development.js:25010:1)
at invokeEffectsInDev (react-dom.development.js:27304:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27280:1)
at flushPassiveEffectsImpl (react-dom.development.js:27007:1)
at flushPassiveEffects (react-dom.development.js:26935:1)
at performSyncWorkOnRoot (react-dom.development.js:26032:1)
at flushSyncCallbacks (react-dom.development.js:12009:1)

编码：

import { useState, useEffect } from \'react\'
import { useNavigate } from \'react-router-dom\'
import { collection, getDocs, query, orderBy, limit } from \'firebase/firestore\'
import { db } from \'../firebase.config\'
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from \'swiper\'
import { Swiper, SwiperSlide } from \'swiper/react\'
import \'swiper/swiper-bundle.css\'
import Spinner from \'./Spinner\'
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y])

function Slider() {
  const [loading, setLoading] = useState(true)
  const [listings, setListings] = useState(null)

  const navigate = useNavigate()

  useEffect(() => {
    const fetchListings = async () => {
      const listingsRef = collection(db, \'listings\')
      const q = query(listingsRef, orderBy(\'timestamp\', \'desc\'), limit(5))
      const querySnap = await getDocs(q)

      let listings = []

      querySnap.forEach((doc) => {
        return listings.push({
          id: doc.id,
          data: doc.data(),
        })
      })

      setListings(listings)
      setLoading(false)
    }

    fetchListings()
  }, [])

  if (loading) {
    return <Spinner />
  }

  if (listings.length === 0) {
    return <></>
  }

  return (
    listings && (
      <>
        <p className=\'exploreHeading\'>Recommended</p>

        <Swiper slidesPerView={1} pagination={{ clickable: true }}>
          {listings.map(({ data, id }) => (
            <SwiperSlide
              key={id}
              onClick={() => navigate(`/category/${data.type}/${id}`)}
            >
              <div
                style={{
                  background: `url(${data.imgUrls[0]}) center no-repeat`,
                  backgroundSize: \'cover\',
                }}
                className=\'swiperSlideDiv\'
              >
                <p className=\'swiperSlideText\'>{data.name}</p>
                <p className=\'swiperSlidePrice\'>
                  ${data.discountedPrice ?? data.regularPrice}{\' \'}
                  {data.type === \'rent\' && \'/ month\'}
                </p>
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </>
    )
  )
}

export default Slider

GitHub link to the repo

标签： reactjs swiper.js

【解决方案1】：

尝试切换切换器包的版本。

查看 traversary 仓库的 package.json：https://github.com/bradtraversy/house-marketplace/blob/main/package.json

【讨论】：

【解决方案2】：

我目前在学习关于 udemy 的课程时遇到了同样的问题，似乎在我的代码中找不到任何区别。我使用的是视频中使用的相同版本。检查以查看任何修复或解决方案。

【讨论】：