Ich folge diesem Tutorial hier:
Nach dem Ausführen webpackversuche ich, die Seite anzuzeigen, aber es wird eine leere Seite zurückgegeben.
Wenn ich die Entwicklerkonsole überprüfe, erhalte ich die folgende Fehlermeldung:
Uncaught ReferenceError: web3 is not defined at new App (build.js:10665) at constructClassInstance (build.js:19093) at updateClassComponent (build.js:20577) at beginWork (build.js:20963) at performUnitOfWork (build.js :22962) bei workLoop (build.js:23026) bei HTMLUnknownElement.callCallback (build.js:13280) bei Object.invokeGuardedCallbackDev (build.js:13319) bei invokeGuardedCallback (build.js:13176) bei renderRoot (build.js: 23104) build.js:22485 Der obige Fehler ist in der Komponente aufgetreten: in App
Erwägen Sie, Ihrem Baum eine Fehlergrenze hinzuzufügen, um das Fehlerbehandlungsverhalten anzupassen. Besuchen Sie https://fb.me/react-error-boundaries , um mehr über Fehlergrenzen zu erfahren. logCapturedError @ build.js:22485 build.js:23732 Nicht erfasster Fehler: Ein ursprungsübergreifender Fehler wurde ausgegeben. React hat keinen Zugriff auf das eigentliche Fehlerobjekt in der Entwicklung. Weitere Informationen finden Sie unter https://fb.me/react-crossorigin-error . bei Object.invokeGuardedCallbackDev (build.js:13326) bei invokeGuardedCallback (build.js:13176) bei renderRoot (build.js:23104) bei performWorkOnRoot (build.js:23752) bei performWork (build.js:23705) bei requestWork ( build.js:23616) bei scheduleWorkImpl (build.js:23470) bei scheduleWork (build.js:23427) bei scheduleTopLevelUpdate (build.js:23931) bei Object.updateContainer (build.js:23969)
Das ist seltsam, da meine index.js (die Datei, aus der ich baue) hat
import Web3 from 'web3'
Ich habe sogar versucht zu tauschen
Web3 = require('web3')
aber vergeblich.
Dies sind die Verweise auf web3in der js-Datei:
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"))
}
Was mache ich falsch?
Versuchen Sie es so:
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 });
}
Ich würde eine separate Datei erstellen, um den gesamten Konfigurationscode rund um die web3-Bibliothek aufzunehmen, die so aussehen würde:
import Web3 from 'web3';
const web3 = new Web3(window.web3.currentProvider);
export default web3;
Jetzt habe ich ES2016 verwendet, um den Zustand zu initialisieren, in dem Sie die constructor()Funktion nicht mehr benötigen.
Sie möchten Ihre eigene lokale Instanz von web3 einrichten und den Anbieter aus der injizierten Kopie herausreißen, die von Metamask stammt, und dies ermöglicht Ihrer Instanz von web3, sich automatisch mit dem Rinkeby-Testnetzwerk zu verbinden und alle zugewiesenen Konten zu nutzen Metamask-Erweiterung.
Also habe ich eine neue Instanz von web3 erstellt und gleichzeitig die von metamask bereitgestellte injizierte Kopie von web3 herausgerissen. Um den Anbieter herauszureißen, sehen Sie den Verweis auf die windowglobale Variable.
Metamask fügt web3 in die globale Variable web3 ein. Der currentProviderist für das Testnetz Rinkeby vorkonfiguriert.
Sie können es dann wie oben gezeigt in die Datei importieren Appund es dann trösten, um sicherzustellen, dass es so funktioniert:
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);
}
Benutzer19510
Web3(Großbuchstaben) ein. Sie definieren nichts namensweb3(Kleinbuchstaben). Ich sehe Code in diesem Blogbeitrag, der besagtweb3.eth.contract(...). Dies sollte wahrscheinlich stattdessen gelesenthis.web3.eth.contract(...)werden. Aber ich bin mir nicht sicher, ob Sie dort auf den Fehler stoßen. Möglicherweise müssen Sie Ihren Code auf eine minimale Reproduktion reduzieren und ihn dann freigeben.0xsegfehler
again). Werde die Web 3 Referenzen ausschneiden und posten. Danke dirBenutzer19510
web3Referenzen gibt, die eigentlichthis.web3. (Diese Dinge funktionieren wahrscheinlich gut, wenn Sie MetaMask oder einen anderen Injektor in der Nähe habenweb3, aber ohne das wird es nicht definiert.)0xsegfehler
Benutzer19510
MetaMaskLaufenweb3sollte eigentlich global definiert werden. Istweb3bei dir in der Browserkonsole definiert?0xsegfehler
index.htmlDatei anzuzeigen, ohne sie bereitzustellen, dh indem ich sie öffne. Muss ich hinzufügenthis, um es möglich zu machen?0xsegfehler
Is web3 defined for you in the browser console?? Ich verwende es, um auf Dapps zuzugreifen / den Vertrag aus dem Tutorial bereitzustellen, und es scheint gut zu funktionierenBenutzer19510
web3in die Browserkonsole eingeben, heißt es, dass es nicht definiert ist, oder hat es einen Wert?Benutzer19510
0xsegfehler
web3in meinen Server eingebe, bekommeProxy {_requestManager: s, currentProvider: MetamaskInpageProvider, eth: r, db: e.exports, shh: a, …}ich versucht, Livereload. Vielleicht musst du nur ein Reaktions-Tutorial machen. Vielen DankBenutzer19510
0xsegfehler