Question

遵循以下提示，我已经在Web应用程序中安装了react-id-swiper：

https://www.npmjs.com/package/react-id-swiper

安装： npm install --save react-id-swiper@latest swiper@latest

我创建了以下组件：

import React from 'react';
import Swiper from 'react-id-swiper/lib/ReactIdSwiper.full';

const SimpleSwiper = () => (
  <Swiper>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
    <div>Slide 5</div>
  </Swiper>
)

export default SimpleSwiper;

在App.js中具有导入的组件：

import React from 'react';
import {Route} from 'react-router-dom';

import LandingPage from './templates/LandingPage';
import SimpleSwiper from "./templates/Swiper";

class App extends React.Component{

  render(){
    return(

    <div>
      <Route path="/" exact component={LandingPage} />
      <Route path="/slide" component={ () => 
        <SimpleSwiper />}  
      />
    </div>
  )
  }

}

export default App;

在浏览器http://localhost:3000/slide中访问它时显示以下错误：

Uncaught TypeError: react_1.useEffect is not a function
    at ReactIdSwiper (ReactIdSwiper.full.js:104)
    at mountIndeterminateComponent (react-dom.development.js:13381)
    at beginWork (react-dom.development.js:13821)
    at performUnitOfWork (react-dom.development.js:15864)
    at workLoop (react-dom.development.js:15903)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at replayUnitOfWork (react-dom.development.js:15311)
    at renderRoot (react-dom.development.js:15963)

我不确定我错过了什么...

Answer 1

显然，他们已经在使用useEffect钩子（太棒了！）。也许您可以直接导入它？

import React, { useEffect } from 'react';

Answer 2

编辑：

我正在使用React的16.3.2版本。

挂钩是16.8.0版的一部分，您可以通过升级React和React-dom 16.8.0来使用它。

我已对其进行升级：

npm upgrade react react-dom

已更新为"react-dom": "^16.8.6"的版本，现在一切正常。

因此，如果要使用react-swiper，请确保您的React和React-dom是最新的，以便可以使用Hooks。

React swiper不起作用：未捕获的TypeError：react_1.useEffect不是函数

2 个答案: