如何在 React 组件中使用 getter 函数？答案

【问题标题】：How to use a getter function inside a React component?如何在 React 组件中使用 getter 函数？
【发布时间】：2022-10-20 00:56:44
【问题描述】：

我正在尝试制作一个基本的 React 组件来从已部署的合同中检索一个值。在此示例中，我使用输入框接收合约地址（这是 ERC20 令牌在 localhost 上的部署地址）并填充 Balance 组件的 addr 状态变量。

单击Get Balance 按钮时，应检索合约的max_supply 并使用该值更新balance 状态变量。

我能够部署 ERC20 代币合约。但是，我无法从我的Balance 组件中检索s_maxSupply() getter 的值。这甚至可能吗？如果没有，任何替代方案将不胜感激。先感谢您。

import { useState } from 'react';
import { ethers } from 'ethers';
import OilToken from '../artifacts/contracts/OilToken.sol/OilToken.json'


const Balance = () => {
    const [addr, setAddr] = useState('---');
    const [balance, setBalance] = useState(0);
    let _balance = 0;

    async function getBalanceFromContract() {

        if (typeof window.ethereum !== 'undefined') {
            const [account] = await window.ethereum.request({ method: 'eth_requestAccounts' })
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const contract = new ethers.Contract(addr, OilToken.abi, provider)
            _balance = contract.s_maxSupply();
        }
    }

    function _setBalance() {
        getBalanceFromContract();
        setBalance(_balance);
    }

    return (
        <div>
            <br />
            <input onChange={e => setAddr(e.target.value)} placeholder="Enter account address" value={addr} />
            <button onClick={_setBalance}>Get Balance</button>
            <br />
            <div>The Max Supply of tokens is: {balance}</div>
        </div>
    );
}

export default Balance

为了完整起见，下面提供了 ERC20 代币。

pragma solidity ^0.8.6;

import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Votes.sol";

contract OilToken is ERC20Votes {
    uint256 public s_maxSupply = 1000 * 10**18;

    mapping 

    constructor() ERC20("OilToken", "OIL") ERC20Permit("GovernanceToken") {
        _mint(msg.sender, s_maxSupply);
    }


 
    function _afterTokenTransfer(
        address from,
        address to,
        uint256 amount
    ) internal override(ERC20Votes) {
        super._afterTokenTransfer(from, to, amount);
    }

    function _mint(address to, uint256 amount) internal override(ERC20Votes) {
        super._mint(to, amount);
    }

    function _burn(address account, uint256 amount)
        internal
        override(ERC20Votes)
    {
        super._burn(account, amount);
    }
}

【问题讨论】：

您能否将代码包装在 if 语句中的 try/catch 中，然后查看您遇到了什么样的错误。
[[PromiseResult]]：错误：网络不支持 ENS (operation="getResolver", network="unknown", code=UNSUPPORTED_OPERATION, version=providers/5.6.5) 在 Logger.makeError (localhost:3000/static/js/bundle.js:7872:19) at.. .
可能您向合同传递了错误的论据
_balance = await contract.s_maxSupply(); 在此处添加 await 关键字。另外根据您传递的错误参数是错误的。你在哪个地址申请调用ethers.Contract(addr, OilToken.abi, provider)中的合约
是的，一开始我确实通过了错误的论点。我解决了它，但仍然无法 console.log (_balance)。该错误与 BigNumbres 有关，因此（在solidity 合同中）我将 s_maxSupply 数据类型更改为 UINT8 并且它可以工作！这只会打开另一个兔子洞来处理。

标签： reactjs solidity hardhat

【解决方案1】：

contract.s_maxSupply() 将返回承诺，所以你需要这样写

_balance = await contract.s_maxSupply();

【讨论】：

【解决方案2】：

s_maxSupply() 中的“s”代表什么？

【讨论】：