在我的 React 应用程序上不断收到 Invalid Hook call 错误

如何解决在我的 React 应用程序上不断收到 Invalid Hook call 错误

我正在尝试从我的智能合约中获取一些信息以显示在我的 React 应用首页上。但是，每当我尝试这样做时，我都会收到此错误

Server Error
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.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
resolvedispatcher
file:///Users/louiefranchino/Documents/eventsystem/node_modules/react/cjs/react.development.js (1476:13)
useContext
file:///Users/louiefranchino/Documents/eventsystem/node_modules/react/cjs/react.development.js (1484:20)
Html
../../node_modules/next/dist/pages/_document.js (9:873)
processChild
file:///Users/louiefranchino/node_modules/react-dom/cjs/react-dom-server.node.development.js (3353:14)
resolve
file:///Users/louiefranchino/node_modules/react-dom/cjs/react-dom-server.node.development.js (3270:5)
ReactDOMServerRenderer.render
file:///Users/louiefranchino/node_modules/react-dom/cjs/react-dom-server.node.development.js (3753:22)
ReactDOMServerRenderer.read
file:///Users/louiefranchino/node_modules/react-dom/cjs/react-dom-server.node.development.js (3690:29)
renderToStaticmarkup
file:///Users/louiefranchino/node_modules/react-dom/cjs/react-dom-server.node.development.js (4314:27)
renderDocument
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/render.js (2:749)
renderToHTML
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/render.js (54:698)
runMicrotasks
<anonymous>
processticksAndRejections
internal/process/task_queues.js (94:5)
async
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/next-server.js (112:97)
async
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/next-server.js (105:142)
async DevServer.renderToHTMLWithComponents
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/next-server.js (137:387)
async DevServer.renderToHTML
file:///Users/louiefranchino/node_modules/next/dist/next-server/server/next-server.js (138:610)

这很奇怪，因为我的代码以前可以工作，但是现在我除了这个错误什么也没有。这是我的代码：

import React,{ Component } from "react";
import { Card } from "semantic-ui-react";
import factory from "../ethereum/factory";

class EventIndex extends Component {
  static async getinitialProps() {
    const events = await factory.methods.getDeployedEvents().call();

    return { events };
  }


  render() {
    return <div>{this.props.events[0]}</div>;
  }
}

export default EventIndex;

如果有人可以帮助我，请告诉我。

编辑：更新：我认为我的依赖项或其他方面存在错误。当我尝试运行我以前运行良好的应用程序时。尽管有不同的错误，但我也遇到了错误。我读到如果您有两个 React 包，则会显示此 Hook 错误，我该如何解决此问题？

完整代码如下： https://github.com/Loustaaa/eventsystem/tree/test