reactjs - 在 React 中使用 MetaMask 中的 web3

Question

我正在尝试在 React js 应用程序中使用 MetaMask 中的 web3，如下所示:

import Web3 from 'web3';

    componentDidMount(){
            if (typeof web3 !== 'undefined') {
                console.log(web3.currentProvider);
                    // Use Mist/MetaMask's provider
                    var web3js = new Web3(web3.currentProvider);

                    web3.version.getNetwork((err, netId) => {
                    switch (netId) {
                        case "1":
                            console.log('This is mainnet')
                            break
                        case "2":
                            console.log('This is the deprecated Morden test network.')
                            break
                        case "3":
                            console.log('This is the ropsten test network.')
                            break
                        case "4":
                            console.log('This is the Rinkeby test network.')
                            break
                        case "42":
                            console.log('This is the Kovan test network.')
                            break
                        default:
                            console.log('This is an unknown network.')
                    }
                })
            } else {
                    console.log('No web3? You should consider trying MetaMask!')
            }           
        }

这是我在 chrome 开发控制台中得到的输出:

显然，在某些时候，MetaMask 根据前两行正确定义了 web3，但随后 React 抛出一个错误，指出 if(typeof web3 !== 'undefined') 中出现的实例未定义 web3。我尝试过的所有操作都会导致相同的错误或 web3 未加载。

Answer 1

您应该在浏览器中使用 Web3 提供程序，例如 MetaMask。 这是我用于 web3 检测的脚本:

window.addEventListener('load', function () {
    if (typeof web3 !== 'undefined') {        
        window.web3 = new Web3(window.web3.currentProvider)

        if (window.web3.currentProvider.isMetaMask === true) {
            window.web3.eth.getAccounts((error, accounts) => {
                if (accounts.length == 0) {
                    // there is no active accounts in MetaMask
                }
                else {
                    // It's ok
                }
            });
        } else {
            // Another web3 provider
        }
    } else {
        // No web 3 provider
    }    
});