Question

在假设网页所在的gatsby本地主机上获取此错误代码：错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：

您可能使用了不匹配的React和渲染器版本（例如React DOM）
您可能正在违反挂钩规则

您可能在同一应用中拥有多个React副本

import React from "react"
 //import { Link } from "gatsby"
 import Layout from "../components/layout"
 import 'bootstrap/dist/css/bootstrap.min.css';
 import slide01 from "../images/slide01.jpg"
 import { Carousel} from 'react-bootstrap';

 const IndexPage = (props) => (
   <Layout>
         <Carousel>
             <Carousel.Item>
                 <img src={slide01} alt="before and after" />
             </Carousel.Item>
         </Carousel>
   </Layout>
 )

 export default IndexPage

Answer 1

大多数时候（几乎100％）会发生此错误，是因为您正在加载react-dom包的多个实例。这意味着您安装了React依赖项，另一个依赖项也将React用作内部包，从而导致多次加载。

看看您的package.json来检查您的依赖性。

此外，您会发现有用的this GitHub thread，因为它会暴露出许多不同的错误，其成因以及针对每种情况的适合您的问题的解决方案。

gatsby react-bootstrap轮播无法正常工作

1 个答案: