我想使用.jsx显示网页上NFT项目铸造的NFT的总量

Question

这是我的基本网页代码，该网页允许用户使用其MetAmask钱包造币。我要做的是在屏幕上显示铸造的总量供用户查看。为此，我只想说我希望它是X/4756。我有一个在下面显示的总铸造的地方，我有****希望X/4756在这里。我的问题是，我似乎无法将X显示为铸造的金额。我将其显示在Console.log中，但无法将其显示在屏幕上。我在网络上搜索，并尝试了诸如将{}放在变量“ count”周围之类的事情上，但它一直说我放置在{}中的变量是未定义的。有没有办法将变量放入其中，然后只键入 /4756将其显示为X /4756，甚至将其从Console.log中抽出的方法？让我知道是否有人有任何想法！谢谢你！

import React, { useEffect, useState } from "react";
import "./App.css";
import { ethers } from "ethers";
import abi from "./util/WavePortal.json";

const App = () => {
  const [currentAccount, setCurrentAccount] = useState("");

  const contractAddress = "0xbA0d7f21F06C329188580864e06DD6cdb03F1e5d"
  const contractABI = abi.abi;
  
  const checkIfWalletIsConnected = async () => {
    try {
      const { ethereum } = window;

      if (!ethereum) {
        console.log("Make sure you have metamask!");
        return;
      } else {
        console.log("We have the ethereum object", ethereum);
      }

      const accounts = await ethereum.request({ method: "eth_accounts" });

      if (accounts.length !== 0) {
        const account = accounts[0];
        console.log("Found an authorized account:", account);
        setCurrentAccount(account);
      } else {
        console.log("No authorized account found")
      }
    } catch (error) {
      console.log(error);
    }
  }

  /**
  * Implement your connectWallet method here
  */
  const connectWallet = async () => {
    try {
      const { ethereum } = window;

      if (!ethereum) {
        alert("Get MetaMask!");
        return;
      }

      const accounts = await ethereum.request({ method: "eth_requestAccounts" });

      console.log("Connected", accounts[0]);
      setCurrentAccount(accounts[0]);
    } catch (error) {
      console.log(error)
    }
  }

  const wave = async () => {
    try {
      const { ethereum } = window;

      if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const wavePortalContract = new ethers.Contract(contractAddress, contractABI, signer);

        let count = await wavePortalContract.getTotalWaves();
        console.log("Retrieved total wave count...", count.toNumber());
        let count2 = count.toNumber();
        const waveTxn = await wavePortalContract.wave();
        console.log("Mining...", waveTxn.hash);
        
        await waveTxn.wait();
        console.log("Mined -- ", waveTxn.hash);

        count = await wavePortalContract.getTotalWaves();
        console.log("Retrieved total wave count...", count.toNumber());
      } else {
        console.log("Ethereum object doesn't exist!");
      }
    } catch (error) {
      console.log(error);
    }
}
  
  useEffect(() => {
    checkIfWalletIsConnected();
  }, [])
  
  return (
    <div className="mainContainer">
      <div className="dataContainer">
        <div className="header">
        
              

Answer 1

尝试使用Usestate钩进行计数。

const [count, setCount] = useState();

从请求中获得计数后，用setCount设置了计数后

count = await wavePortalContract.getTotalWaves();
setCount(count)

，最终将count var插入JSX中。

<div className="bio">
 Total Mints: `${count}`
</div>

希望它有帮助:)