Estoy tratando de importar una función de otro archivo y, mientras renderizo en el componente de reacción, no se renderiza. El valor de esa variable se muestra undefined
índice.js
const GetOwnBalance = async () => { if (!isInitialized) { await init(); } // const web2 = new Web3(provider); nftContract.methods .getBalance(selectedAccount) .call() .then((balance) => { // console.log(`Balance of ${selectedAccount} is ${balance}`); console.log("Intermediate balance : " + balance); // return balance; } ); }; export default GetOwnBalance;Hasta que esto todo funciona perfecto, pero el problema está en App.js
Aplicación.js
import React, { useState } from 'react'; import GetOwnBalance from './index'; function App() { const [balance, setBalance] = useState(0); function fetchBalance() { GetOwnBalance() .then(value => { setBalance(value); //value shows undefined ??? console.log("Final Balance : " + value); } ); } return ( <div className="App"> <p>Your balance is {balance}</p> <button onClick={fetchBalance}>Refresh balance</button> </div> ); } export default App; Cuando trato de ejecutar este fragmento de código, el value del valor en la promesa .then() se muestra indefinido. ¿Puede alguien explicar por qué es así?
Es porque no está devolviendo nada de la función GetOwnBalance .
Intente agregar la palabra clave return en return nftContract.methods....
const GetOwnBalance = async () => { if (!isInitialized) { await init(); } // const web2 = new Web3(provider); return nftContract.methods .getBalance(selectedAccount) .call() .then((balance) => { // console.log(`Balance of ${selectedAccount} is ${balance}`); console.log("Intermediate balance : " + balance); // return balance; <-- Also uncomment this } ); }; export default GetOwnBalance;¿La función "GetOwnBalance" está ubicada en index.js o ./Web3Client'?
En lugar del parámetro "valor" en
.then(value => { setBalance(balance); //value shows undefined ??? console.log("Final Balance : " + balance); }Intente simplemente usar el nombre del valor del gancho:
.then(() => { setBalance(value); console.log("Final Balance : " + value); })Además, no tiene que configurar "GetOwnBalance" como asíncrono si no usa await