web3 中的 getAccount() 在两个不同的浏览器上产生两个不同的错误

Question

我正在尝试按照教程进行操作，但不断收到两个不同的错误：

在 chrome 上：

"Unhandled Rejection (TypeError): Cannot read property 'then' of undefined"

在 Firefox 上：

Unhandled Rejection (TypeError): web3.eth.getAccounts(...) is undefined

我的代码很简单，它是一个使用 Ganache 和 npm 的本地主机提供商的 React 项目：

 async loadBlockchainData(){
  const web3 = await window.web3
  const acc = await web3.eth.getAccounts().then(console.log);      
  this.setState({account: acc[0]})

为什么 getAccounts 首先返回 undefined？以及为什么 chrome 会产生此错误而 firefox 不会？

我的元掩码已在两个浏览器中登录（并接受连接）

web3 版本为 web3@1.0.0-beta.55

编辑：这是我初始化 web3 的方式：

 async componentWillMount(){
 await this.loadWeb3();
 await this.loadBlockchainData();
    }    
  async loadWeb3() {

   window.addEventListener('load', async () => {
     if (window.ethereum) {
       window.web3 = new Web3(window.ethereum);
       await window.ethereum.enable();

     } 

     else if (window.web3) {
      window.web3 = new Web3(window.web3.currentProvider);

     }

     else {
      console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
     }
   });

}

Answer 1

最可能的原因是您没有正确初始化 web3。如果您正在使用 metamask，则像这样初始化 web3：

const web3 = new Web3(window.web3.currentProvider);

并且在文件导入开始时 Web3。

import Web3 from 'web3';

还要格外小心，不要将大写字母 Web3 与小写字母 web3 混合使用。

问题编辑和评论后编辑

我不知道你在看哪个教程。但是您不必 loadBlockchainData() 中的 window.web3 上的 await 也不必 loadWeb3() 中的 window 上的 listen 加载。

简化loadWeb3()

async loadWeb3() {
    if (window.ethereum) {
        window.web3 = new Web3(window.ethereum);
        await window.ethereum.enable();
    } else if (window.web3) {
        window.web3 = new Web3(window.web3.currentProvider);
    } else {
        console.log("Non-Ethereum browser detected. You should consider trying MetaMask!");
    }
}

和loadBlockchainData()

async loadBlockchainData() {
    const web3 = window.web3;
    const acc = await web3.eth.getAccounts();
    this.setState({ account: acc[0] });
}

web3 版本 1.2.1 和 React 版本 16.10.2

Answer 2

我按照 dapp 大学教程遇到了同样的错误。这可以通过将 http://localhost:3000/ 复制到具有 metaMask 的 chrome 浏览器来解决。然后网页正常显示。

Answer 3

window.web3 被 metamask 移除。现在一切都可以用 window.ethereum - web3 removal link by metamask

来完成

下面是获取账号的新方法。

import detectEthereumProvider from '@metamask/detect-provider';

初始化以太坊供应商

async loadWeb3() {
const provider = await detectEthereumProvider()

if (provider) {
  console.log('Ethereum successfully detected!')
  // From now on, this should always be true:
  // provider === window.ethereum

  // Access the decentralized web!

  // Legacy providers may only have ethereum.sendAsync
  const chainId = await provider.request({
    method: 'eth_chainId'
  })
} else {
  // if the provider is not detected, detectEthereumProvider resolves to null
  console.error('Please install MetaMask!' )
}
}

访问帐户的方法如下：

async loadWeb3Accounts() {
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
console.log(accounts[0]);}

web3 中的 getAccount() 在两个不同的浏览器上产生两个不同的错误

getAccount() in web3 produce two different errors on two different browsers

rpc

ethereum

solidity

web3

metamask