Javascript 反应无效挂钩错误：无效挂钩调用。钩子只能在函数组件的主体内部调用

我的反应有错误。这是一个新启动的项目，只有几个组件。 该错误同时引用到useState（）和useEffect（）

错误消息：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.development.js:14906)
    at useState (react.development.js:1508)
    at IndexPage (IndexPage.js:9)
    at Route.js:55
    at updateContextConsumer (react-dom.development.js:18747)
    at beginWork (react-dom.development.js:19114)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at scheduleUpdateOnFiber (react-dom.development.js:21881)
    at updateContainer (react-dom.development.js:25482)
    at react-dom.development.js:26021
    at unbatchedUpdates (react-dom.development.js:22431)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.js:8)
    at Module../src/index.js (index.js:19)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (const.js:10)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Uncaught错误：钩子调用无效。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：
1.React和渲染器的版本可能不匹配（例如React DOM）
2.你可能违反了钩子的规则
3.同一应用程序中可能有多个React副本
看见https://reactjs.org/link/invalid-hook-call 有关如何调试和修复此问题的提示。
位于Object.throwInvalidHookError（react dom.development.js:14906）
在useState（react.development.js:1508）
在IndexPage（IndexPage.js:9）
在路线.js:55
在updateContextConsumer（react dom.development.js:18747）
开始工作时（react dom.development.js:19114）
在htmlunknowneelement.callCallback（react dom.development.js:3945）
在Object.invokeGuardedCallbackDev（react dom.development.js:3994）
在invokeGuardedCallback（react dom.development.js:4056）
开始工作时$1（react dom.development.js:23964）
执行工作时（react dom.development.js:22776）
在workLoopSync（react dom.development.js:22707）
在renderRootSync（react dom.development.js:22670）
在PerformSyncWorkRoot（react dom.development.js:22293）
在scheduleUpdateOnFiber（react dom.development.js:21881）
在updateContainer（react dom.development.js:25482）
在react dom.development.js:26021
在未分段更新时（react dom.development.js:22431）
在legacyRenderSubtreeIntoContainer（react dom.development.js:26020）
在Object.render（react dom.development.js:26103）
在模块上

组件代码：

import React, { useState, useEffect } from 'react'
import General from '../generalInfo/General'
import Axios from 'axios'

import {MAIN_URL} from '../../utils/const.js'

const IndexPage = () => {

    const [generalInfo, setGeneralInfo] = useState();
    
    useEffect(() => {
        getGeneral();
    }, [])

    const getGeneral = () => {
        console.log("Getting general");
        Axios.get(MAIN_URL + "/general", {
            headers: {'Authorization': 'authorized', 'Content-type': 'application/json; charset=UTF-8'}
        }).then(response => {
            if(response.status === 404){
                console.log("Not Found");
                //Implement error handling
            }else{
                setGeneralInfo(response.data);
            }
        })
    }


    return (
        <div id = "locationBG">
            <main className="container mt-3" itemscope itemtype ="http://schema.org/Person">
                <article className="row">
                    /*Start of left column*/
                    <section class="col-sm-4">
                        <General general={generalInfo} />
                    </section>
                    /*End of left column*/

                </article>
            </main>
        </div>
    )
}

export default IndexPage;

import React，{useState，useffect}来自“React”
从“../generalInfo/General”导入常规
从“Axios”导入Axios
从“../../utils/const.js”导入{MAIN_URL}
常量索引页=（）=>{
const[generalInfo，setGeneralInfo]=useState（）；
useffect（（）=>{
getGeneral（）；
}, [])
常量getGeneral=（）=>{
console.log（“获取常规”）；
获取（主URL+“/general”{
标题：{'Authorization'：'authorized'，'Content type'：'application/json；charset=UTF-8'}
})。然后（响应=>{
如果（response.status==404）{
控制台日志（“未找到”）；
//实现错误处理
}否则{
setGeneralInfo（response.data）；
}
})
}
返回(
/*左栏开始*/
/*左栏尾*/
)
}
导出默认索引扩展；

我只有一个react和react dom的副本。
json还包括axios和react路由器dom作为依赖项

IndexPage.js在App.js文件中的React路由器中使用

<Router>
    <div className="App">
      <Header />
      <Switch>
        <Route exact path="/" render={IndexPage} />
      </Switch>
      <Footer />
    </div>
  </Router>



以前有人遇到过这个问题吗？
你是如何使用
IndexPage
组件的？我在App.js中的react路由器中使用了IndexPage组件。官方react网站上有关于调试这个问题的更多详细信息：是的，我已经浏览过该网站4次了
<Router>
    <div className="App">
      <Header />
      <Switch>
        <Route exact path="/" render={IndexPage} />
      </Switch>
      <Footer />
    </div>
  </Router>