Web3 未定義

我在這里關注本教程：

https://medium.com/@merunasgrincalaitis/the-ultimate-end-to-end-tutorial-to-create-and-deploy-a-fully-descentralized-dapp-in-ethereum-18f0cf6d7e0e

執行後webpack我嘗試查看該頁面，但它返回一個空白頁面。

當我檢查開發人員控制台時，我收到以下錯誤：

未擷取的 ReferenceError：web3 未在 performUnitOfWork (build.js) 的 beginWork (build.js:20963) 的 updateClassComponent (build.js:20577) 的新應用程序 (build.js:10665) 中定義:22962) 在工作循環 (build.js:23026) 在 HTMLUnknownElement.callCallback (build.js:13280) 在 Object.invokeGuardedCallbackDev (build.js:13319) 在 invokeGuardedCallback (build.js:13176) 在 renderRoot (build.js: 23104) build.js:22485 上述錯誤發生在組件中：在App中

考慮向樹中添加錯誤邊界以自定義錯誤處理行為。訪問https://fb.me/react-error-boundaries以了解有關錯誤邊界的更多資訊。logCapturedError @ build.js:22485 build.js:23732 未擷取的錯誤：引發了跨域錯誤。React 無法訪問開發中的實際錯誤對象。見 https://fb.me/react-crossorigin-error了解更多資訊。在 Object.invokeGuardedCallbackDev (build.js:13326) 在 invokeGuardedCallback (build.js:13176) 在 renderRoot (build.js:23104) 在 performWorkOnRoot (build.js:23752) 在 performWork (build.js:23705) 在 requestWork ( build.js:23616) 在 scheduleWorkImpl (build.js:23470) 在 scheduleWork (build.js:23427) 在 scheduleTopLevelUpdate (build.js:23931) 在 Object.updateContainer (build.js:23969)

這很奇怪，因為我的 index.js（我從中建構的文件）有

import Web3 from 'web3'

我什至嘗試過交換

Web3 = require('web3')

但無濟於事。

這些是對web3js 文件中的引用：

import React from 'react'
import ReactDOM from 'react-dom'
import Web3 from 'web3'
import './../css/index.css'


class App extends React.Component {

   /*
   Constructor and set the initial state of the application
   */

   constructor(props){
       super(props)
       this.state = {
           lastWinner: 0,
           numberOfBets: 0,
           minimumBet: 0,
           totalBet: 0,
           maxAmountOfBets: 0,
       }

       /*
       Checking to see if Web3 variable we imported is defined or not
       */

       if(typeof web3 != 'undefined'){
           console.log("Using web3 detected from external source like Metamask")
           this.web3 = new Web3(web3.currentProvider)
       }else{
           this.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
       }

我究竟做錯了什麼？

試試這種方式：

import React, { Component } from 'react';
import web3 from './web3';

class App extends Component {
 state = { lastWinner: 0, numberOfBets: 0, minimumBet: 0, totalBet: 0, maxAmountOfBets: 0 };

 async componentDidMount() {
   const lastWinner = await blackjack.methods.lastWinner().call();
   const numberOfBets = await blackjack.methods.getNumberOfBets().call();

   this.setState({ lastWinner, numberOfBets });
 }

我將創建一個單獨的文件來存放 web3 庫周圍的所有配置程式碼，如下所示：

import Web3 from 'web3';

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

export default web3;

現在，我使用 ES2016 初始化狀態的方式，您不再需要該constructor()功能。

您想設置自己的本地 web3 實例並從來自 Metamask 的注入副本中刪除提供程序，這將允許您的 web3 實例自動連接到 Rinkeby 測試網路並使用分配給元遮罩擴展。

所以我創建了一個新的 web3 實例，同時撕掉了 metamask 提供的 web3 的注入副本。撕掉提供者是您看到對window全域變數的引用的地方。

Metamask 將 web3 注入到 web3 全域變數中。已currentProvider為 Rinkeby 測試網路預先配置。

然後，您可以將它導入到App我上面顯示的文件中，然後將其控制台以確保它像這樣工作：

import React, { Component } from 'react';
import web3 from './web3';

class App extends Component {
 state = { lastWinner: 0, numberOfBets: 0, minimumBet: 0, totalBet: 0, maxAmountOfBets: 0 };

 async componentDidMount() {
   const lastWinner = await blackjack.methods.lastWinner().call();
   const numberOfBets = await blackjack.methods.getNumberOfBets().call();

   this.setState({ lastWinner, numberOfBets });
 }

 render() {
   console.log(web3.version);
 }

引用自：https://ethereum.stackexchange.com/questions/33991