[英]importing ConnectButton from web3uikit gives Error: Invalid hook call. Hooks can only be called inside of the body of a function component
I am using nextjs along with tailwind css and a bunch of other libraries like web3uikit.我正在使用 nextjs 以及 tailwind css 和一些其他库,如 web3uikit。 the app work totally fine but as soon as I import ConnectButton from web3uikit and use it in the sidebar component, it gives me the following error: Error: Invalid hook call.该应用程序工作得很好,但是一旦我从 web3uikit 导入 ConnectButton 并在侧边栏组件中使用它,它就会给我以下错误:错误:无效的挂钩调用。 Hooks can only be called inside of the body of a function component.钩子只能在函数组件的主体内部调用。 This could happen for one of the following reasons:这可能由于以下原因之一而发生:
Here's the link to the github repo, just cloning and install the dependencies would help you in setting up the project and then npm run dev.这是 github 存储库的链接,只需克隆和安装依赖项即可帮助您设置项目,然后 npm run dev。
Link: https://github.com/oneknucklehead/marketplace-web3链接: https ://github.com/oneknucklehead/marketplace-web3
进入node_modules -> web3uikit-> node_modules 并删除其下的react文件夹
I believe it is a server-side rendering issue!我相信这是一个服务器端渲染问题! A screenshot of how I got the <ConnectButton />
to render in a nextjs application is below:下面是我如何让<ConnectButton />
在 nextjs 应用程序中呈现的屏幕截图:
Implementing the ConnectButton Component Screenshot实现 ConnectButton 组件截图
When the error popped up saying I had an invalid hook call, I closed the error box and the button was rendered in and when I click on it, it showed the web3Modal with the proper sign-in options.当错误弹出说我有一个无效的挂钩调用时,我关闭了错误框并呈现了按钮,当我单击它时,它显示了带有正确登录选项的 web3Modal。 I thought that maybe it was a server-side issue我以为可能是服务器端问题
So I fixed it by using a useState hook with a boolean value as seen in the screenshot.因此,我通过使用带有布尔值的 useState 挂钩来修复它,如屏幕截图所示。 It is false by default but will only become true when the component loads in(used a useEffect hook to implement) and I take advantage of that via conditional rendering which is also shown in the screenshot.默认情况下它是假的,但只有在组件加载时才会变为真(使用 useEffect 钩子来实现),我通过条件渲染来利用它,这也在屏幕截图中显示。 Once I did that, I haven't encountered the issue at all!一旦我这样做了,我根本没有遇到过这个问题! Hope this helps!希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.