Ich entschuldige mich vorab für die sehr grundlegende Frage. Ich habe web3 mit Garn in meinem Reaktionsprojekt hinzugefügt und installiert. In meiner index.js-Datei in /scr und basierend auf den web3-Dokumenten habe ich beides ausprobiert (nicht gleichzeitig)
var Web3 = require("web3");
var web3 = new Web3();
und
import Web3 from 'web3';
var web3 = new Web3();
vor dem Hinzufügen
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
// set the provider you want from Web3.providers
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
web3.eth.getAccounts((error, accounts) => console.log(accounts[0]));
und endet mit einem Fehler, der sich beschwert "Eigenschaft 0 von undefiniert kann nicht gelesen werden", was mich zu der Annahme veranlasst, dass das Problem bei accounts[0] liegt.
Verwirrenderweise erkennt der Browser, wenn meine require/import-Anweisungen oben auf der Seite gelöscht und die Seite aktualisiert wird, die Metamaske und gibt meine Adresse an die Konsole aus. Außerdem bekomme ich Beschwerden, dass mein web3-Objekt undefiniert ist, aber das ist zu erwarten.
Ich habe webpack oder browserify nicht explizit ausgeführt, da webpack in React-Projekten enthalten ist. Muss ich das tun?
Was ist hier los und wie kann ich mein React-Projekt dazu bringen, mit Metamask zu arbeiten?
Es klingt verwirrend und basierend auf der Version von web3, die Sie haben, ist die Syntax unterschiedlich. Laut dem Fehler, den Sie an erster Stelle erhalten haben, scheinen Sie web3 1.0 zu verwenden. Der Instanzcode ist jedoch für die Version 0.2.xx
Nur zur Verdeutlichung, so sieht Ihr Code aus, falls Sie web3 1.0 verwenden
importiere Web3 aus 'web3'; const web3 = new Web3(Web3.givenProvider || "http://localhost:8545"); web3.eth.getAccounts().then(console.log);
Im Grunde erstellen Sie also eine Instanz von web3 mit dem givenProvider(falls Sie Metamask oder Mist verwenden) oder mit dem local. Dann erhalten Sie Ihre Konten .
Falls Sie die alte Version von web3 verwenden, ist der Code etwas anders:
importiere Web3 aus 'web3';
lass web3 = null;
if (typeof web3 !== 'undefiniert') {
web3 = neues Web3 (web3.aktueller Anbieter);
} anders {
// Legen Sie den gewünschten Anbieter von Web3.providers fest
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
web3.eth.getAccounts(callback(error, result){ console.log(result) })
Am einfachsten ist es, die Komponente „react-web3-provider“ zu verwenden .
Fügen Sie das Web3Providerzu Ihrer Root-React-Komponente hinzu:
import Web3Provider from 'react-web3-provider';
ReactDOM.render(
<Web3Provider
defaultWeb3Provider={
(cb) => cb(new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/YOUR_API_KEY")))
}
loading="Loading..."
>
<App />
</Web3Provider>
)
Dann in der Komponente, in der Sie Web3 verwenden möchten:
import { withWeb3 } from 'react-web3-provider';
class MyComponent {
render() {
const { web3 } = this.props;
web3.eth.getAccounts(console.log);
// Version 1.0.0-beta.35
return "Web3 version: {web3.version}";
}
}
export default withWeb3(MyComponent);
Ab Juli 2019 ist web3-react Ihr bester Schuss . Sehen Sie sich an, wie es in Uniswap verwendet wird .
Vorgeschmack:
function ContextProviders({ children }) {
return (
<ApplicationContextProvider>
<TransactionContextProvider>
<TokensContextProvider>
<BalancesContextProvider>
<AllowancesContextProvider>{children}</AllowancesContextProvider>
</BalancesContextProvider>
</TokensContextProvider>
</TransactionContextProvider>
</ApplicationContextProvider>
)
}
function Updaters() {
return (
<>
<ApplicationContextUpdater />
<TransactionContextUpdater />
</>
)
}
ReactDOM.render(
<ThemeProvider>
<>
...
<Web3Provider connectors={connectors} libraryName="ethers.js">
<ContextProviders>
<Updaters />
<App />
</ContextProviders>
</Web3Provider>
</>
</ThemeProvider>,
document.getElementById('root')
)
Bryan Campell