Estoy tratando de usar reactJS para mostrar el saldo de una billetera Ethereum con web3. Mi código obtiene con éxito el saldo y lo envía a la consola, sin embargo, cuando trato de asignarlo como una variable y mostrarlo en html, aparece el siguiente error: Línea 19:37: 'etherval' no está definido no undef
La secuencia de comandos:
import React from 'react'; import Web3 from 'web3' export default function balances() { const web3 = new Web3(new Web3.providers.HttpProvider('https://****')); web3.eth.getBalance("0x****", function(err1, balance) { { console.log(web3.utils.fromWei(balance, "ether") + " ETH") const etherval = web3.utils.fromWei(balance, "ether"); } }) return ( <div className="details"> <div className="container"> <div className="row"> <div className="col-md-12"> <h2>Balance: {etherval}</h2> </div> </div> </div> </div> ); }He intentado inicializar la variable con let pero esto produce más errores, ¿cómo puedo solucionar esto?
obtenga el saldo en useEffect y configúrelo en el estado:
import { useEffect,useState } from "react"; const [balance, setBallance] = useState(null) useEffect(() => { const loadBalance = async () => { // make sure web3 is properly const web3 = new Web3(new Web3.providers.HttpProvider('https://****')); const balance = await web3.eth.getBalance(addressHere) setBallance(web3.utils.fromWei(balance, "ether")) } loadBalance() }, [])import React, {useState} from 'react'; import Web3 from 'web3' export default function Balances() { const [balance, setBalance] = useState(0) const web3 = new Web3(new Web3.providers.HttpProvider('https://****')); web3.eth.getBalance("0x****", function(err1, balance) { { console.log(web3.utils.fromWei(balance, "ether") + " ETH") setBalance(web3.utils.fromWei(balance, "ether")); } }) return ( <div className="details"> <div className="container"> <div className="row"> <div className="col-md-12"> <h2>Balance: {balance}</h2> </div> </div> </div> </div> ); }Puede usar useState hook y asignar el valor una vez que lo tenga. Si esta versión no representa la cantidad correcta, también puede usar useEffect hook