安装元掩模后不会渲染

Question

我正在学习如何使用metAmask和react.js创建Web3应用

。 “ rel =“ nofollow noreferrer”> https://github.com/chainsafe/web3.js#troubleshooting-and-noukning-issues 解决polyfill周围的错误。

然后我跟随将metamsk与React一起使用。

当未安装到浏览器时，DOM确实会如预期的那样渲染，但安装时不会呈现。它仅进行＆lt; div ID ='root＆gt;＆lt;/div＆gt; 在身体标签中。

为什么仅在安装元掩as时才渲染？有什么想法吗？

app.js是

import React from 'react';
import './App.css';
import Header from './components/Header/Header';
import Main from './components/Main/Main';
import Description from './components/Description/Description';

const App = () => {
  
  return (
    <div>
      <Header />
      <Main />
      <Description />
    </div>
  )
}

export default App

main.jsx

import './main.css';
import React, { useState, useEffect, useRef } from 'react'
import Web3 from 'web3';
import OnboardingButton from './OnboardingButton'

const Main = () => {
  return (
    <div className="container container__main">
        <OnboardingButton />
    </div>
  )
}

export default Main

onboardingbutton.jsx

import React, { useState, useEffect, useRef } from 'react'
import MetaMaskOnboarding from '@metamask/onboarding';

const ONBOARD_TEXT = 'Click here to install Metamask.'
const CONNECT_TEXT = 'Connect';
const CONNECTED_TEXT = 'Connected';


const OnboardingButton = () => {

    const [buttonText, setButtonText] = useState(ONBOARD_TEXT);
    const [isDisabled, setDisabled] = useState(false);
    const [accounts, setAccounts] = useState([]);
    const onboarding = useRef();


    // execute only when DOM initialized
    useEffect(() => {
        if (!onboarding.current) {
            onboarding.current = new MetaMaskOnboarding();
        }
    }, []);

    useEffect(() => {
        if (MetaMaskOnboarding.isMetaMaskInstalled()) {
            if (accounts.length > 0) {
                setButtonText(CONNECTED_TEXT);
                setDisabled(true);
                onboarding.current.stopOnboarding();
            } else {
                setButtonText(CONNECT_TEXT);
                setDisabled(false);
            }
        }
    }, [accounts]);

    useEffect(() => {
        function handleNewAccounts(newAccounts) {
            setAccounts(newAccounts);
        }
        if (MetaMaskOnboarding.isMetaMaskInstalled()) {
            window.ethereum.on('accountsChanged', handleNewAccounts);
            return () => {
                window.ethereum.off('accountsChanged', handleNewAccounts);
            };
        }
    }, []);

    const onClick = () => {
        if (MetaMaskOnboarding.isMetaMaskInstalled()) {
            window.ethereum
                .request({ method: 'eth_requestAccounts' })
                .then((newAccounts) => setAccounts(newAccounts));
        } else {
            onboarding.current.startOnboarding();
        }
    };
    
  
    return (
        <button disabled={isDisabled} onClick={onClick}>
            {buttonText}
        </button>
    );
}

export default OnboardingButton

package.json依赖项

  "dependencies": {
    "@metamask/onboarding": "^1.0.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "web3": "^1.7.4"
    }

Answer 1

首先，我注意到根据MetAmask的教程，我跳过将此代码复制到第三useeffect（）中，但这不是解决方案。

window.ethereum
  .request({ method: 'eth_requestAccounts' })
  .then((newAccounts) => setAccounts(newAccounts));

然后我删除了第三次使用effect（），该effect（）在初始化时请求连接metAmask，以某种方式成功渲染。我认为，当网站刚刚打开时，WebApp不应要求连接到钱包，因此我不需要MetAmask教程中的第三个使用效果。