web3-react导致我的应用程序挂起，没有错误

Question

我正在构建一个使用Etherium钱包的应用程序，名为metamask或infura。该应用程序编译和运行没有任何错误，所有组件加载，但我得到一个空白屏幕。

此应用程序在npm https://www.npmjs.com/package/web3-react上使用web3-react包

这是到web3-react的连接：

import { Connectors } from 'web3-react'
const { InjectedConnector, NetworkOnlyConnector } = Connectors
 
const MetaMask = new InjectedConnector({ supportedNetworks: [1, 4] })
 
const Infura = new NetworkOnlyConnector({
  providerURL: process.env.ENDPOINT
})
 
const connectors = { MetaMask, Infura }

export default connectors

对于Web3Provider包装器和连接器，App.js在web3-react上调用

import React, { Component } from 'react'
import { BrowserRouter as Router, Route} from 'react-router-dom'
import axios from 'axios'
import Web3Provider from 'web3-react'
import './css/bootstrap.min.css'
import './App.css'
import Header from './components/header'
import Home from './components/home'
import Connector from './web3Conn'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  componentDidMount () {
    axios.get('/api/test')
      .then((response) => {
        console.log(response.data)
        this.setState({ price: response.data.price })
      })
      .catch(err => console.log(err))
  }

  render() {
    return (
      <Web3Provider
        connectors={Connector}
        libraryName={'ethers.js'|'web3.js'|null}>

        <Router>
          <Header />
          
          <Route
            path='/'
            exact
            component={Home} 
          />
        
        </Router>
      </Web3Provider>
    )
  }
}

export default App

这是使用web3-react的组件，它使用useWeb3Context()访问它

import React, { useState, useEffect } from 'react'
import { useWeb3Context } from 'web3-react'

const Home = () => {

    const fire = e => {
        e.preventDefault()
        // Call the smart contract
    }

    const stop = e => {
        e.preventDefault()
        // Call the smart contract
    }

    const context = useWeb3Context()
    useEffect(() => {
        context.setFirstValidConnector(['MetaMask', 'Infura'])
    }, [])

    if (!context.active && !context.error) {
        console.log(context.account)
        console.log("Web3 Integration was a success")
    } 
    else if (context.error) {
        console.log(context.error)
    } 
    else {
        console.log("Context is not active")
    }
        
    return(
        <React.Fragment>
            <div className="App">
                <header className="App-header">
                <p>
                    <h1>Coinbot</h1>
                </p>
                
                <div class="row mx-md-n5">
                    <div class="col px-md-5">
                        <div class="p-3 border bg-light">
                            <button 
                                type="button" 
                                class="btn btn-primary btn-lg px-2"
                                onClick={(e) => fire(e)}>
                                    RUN
                            </button>
                        </div>
                    </div>

                    <div class="col px-md-5">
                        <div class="p-3 border bg-light">
                            <button 
                                type="button" 
                                class="btn btn-primary btn-lg px-2"
                                onClick={(e) => stop(e)}>
                                    STOP
                            </button>
                        </div>
                    </div>
                </div>
                </header>

            </div>
            
        </React.Fragment>
    )
    
}

export default Home

我迷路了，我不知道为什么我看到的只是一个白屏。

Answer 1

我找出了问题所在，我没有切换到Ropsten网络。