從 web3uikit 導入 ConnectButton 會出現錯誤：無效的掛鈎調用。 Hooks 只能在函數組件的主體內部調用

Question

我正在使用 nextjs 以及 tailwind css 和一些其他庫，如 web3uikit。 該應用程序工作得很好，但是一旦我從 web3uikit 導入 ConnectButton 並在側邊欄組件中使用它，它就會給我以下錯誤：錯誤：無效的掛鈎調用。 鈎子只能在函數組件的主體內部調用。 這可能由於以下原因之一而發生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能違反了 Hooks 規則
3. 您可能在同一個應用程序中擁有多個 React 副本 有關如何調試和修復此問題的提示，請參閱https://reactjs.org/link/invalid-hook-call 。

這是 github 存儲庫的鏈接，只需克隆和安裝依賴項即可幫助您設置項目，然后 npm run dev。

鏈接： https ://github.com/oneknucklehead/marketplace-web3

Answer 1

進入node_modules -> web3uikit-> node_modules 並刪除其下的react文件夾

Answer 2

我相信這是一個服務器端渲染問題！ 下面是我如何讓<ConnectButton />在 nextjs 應用程序中呈現的屏幕截圖：

實現 ConnectButton 組件截圖

當錯誤彈出說我有一個無效的掛鈎調用時，我關閉了錯誤框並呈現了按鈕，當我單擊它時，它顯示了帶有正確登錄選項的 web3Modal。 我以為可能是服務器端問題

因此，我通過使用帶有布爾值的 useState 掛鈎來修復它，如屏幕截圖所示。 默認情況下它是假的，但只有在組件加載時才會變為真（使用 useEffect 鈎子來實現），我通過條件渲染來利用它，這也在屏幕截圖中顯示。 一旦我這樣做了，我根本沒有遇到過這個問題！ 希望這可以幫助！