在 web3 中构建一个简单的去中心化应用程序的问题答案

【问题标题】：Issue in building a simple decentralised app in web3在 web3 中构建一个简单的去中心化应用程序的问题
【发布时间】：2022-07-28 00:33:34
【问题描述】：

来源：https://betterprogramming.pub/blockchain-introduction-using-real-world-dapp-react-solidity-web3-js-546471419955

首先我创建了一个配置文件，其中包含

export const CONTACT_ADDRESS = "0xfAd567EBdCb36f49F3a509FEDF9e72E3ad75ca59";
export const CONTACT_ABI = [{
    constant: true,
    inputs: [],
    name: "count"
}......]

app.js 文件看起来像这样

import { useEffect, useState } from "react";
import Web3 from "web3";
import { CONTACT_ABI, CONTACT_ADDRESS } from "./config/config";

function App() {
  const [account, setAccount] = useState();
  const [contactList, setContactList] = useState();
  const [contacts, setContacts] = useState([]);

  useEffect(() => {
    async function load() {
      const web3 = new Web3(Web3.givenProvider || "http://localhost:7545");

      const accounts = await web3.eth.requestAccounts();
      setAccount(accounts[0]);

      const contactList = new web3.eth.Contract(CONTACT_ABI, CONTACT_ADDRESS);

      setContactList(contactList);

      const counter = await contactList.methods.count().call();

      for (var i = 1; i <= counter; i++) {
        const contact = await contactList.methods.contacts(i).call();
        setContacts((contacts) => [...contacts, contact]);
      }
    }

    load();
  }, []);

  return (
    <div>
      Your account is: {account}
      <h1>Contacts</h1>
      <ul>
        {Object.keys(contacts).map((contact, index) => (
          <li key={`${contacts[index].name}-${index}`}>
            <h4>{contacts[index].name}</h4>
            <span>
              <b>Phone: </b>
              {contacts[index].phone}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

运行时，出现以下错误。 我不确定配置文件是否导致此错误。如果是这样，我该如何解决？

index.js:297 Uncaught (in promise) Error: Returned values aren't valid, did it run Out of Gas? You might also see this error if you are not using the correct ABI for the contract you are retrieving data from, requesting data from a block number that does not exist, or querying a node that is not fully synced.
    at ABICoder.push../node_modules/web3-eth-abi/lib/index.js.ABICoder.decodeParametersWith (index.js:297:1)
    at ABICoder.push../node_modules/web3-eth-abi/lib/index.js.ABICoder.decodeParameters (index.js:284:1)
    at Contract.push../node_modules/web3-eth-contract/lib/index.js.Contract._decodeMethodReturn (index.js:481:1)
    at Method.outputFormatter (index.js:788:1)
    at Method.push../node_modules/web3-core-method/lib/index.js.Method.formatOutput (index.js:147:1)
    at sendTxCallback (index.js:530:1)
    at cb (util.js:689:1)
    at Item.push../node_modules/process/browser.js.Item.run (browser.js:153:1)
    at drainQueue (browser.js:123:1)

认为contact_address 不正确，但不确定从哪里选择正确的。基本上我如何构建配置文件？

【问题讨论】：

标签： reactjs web3js

【解决方案1】：

在您的配置文件中，将您的CONTACT_ADDRESS 替换为您的智能合约地址。你好像在用你的钱包地址。

【讨论】：