在 React 中使用 ABI 和 Ether.js 查询智能合约

Question

I have a contract deployed to mai.net. I have a javascript file which exports the functions so they could be called by other files. I have a button that calls getOwnerOfToken from my react. When I click on the button nothing happens and nothing is logged. I understand that since this is a view read-only method I only need the provider (metamask). Before accessing the application I validate the user so metamask is detected using window.ethereum .

// Gallery.js (a react component)
import React from "react";
import { getOwnerOfToken } from "../services/nftcontract";

class Gallery extends React.Component {
  constructor(props){
     //constructor stuff here
  }


  // called by onClick of a button in react
  handleProfileChange = selected(selectedIndex) => {
      getOwnerOfToken(selectedIndex).then((address) => {
      this.setState({ currentSelectionnOwner: address });
      console.log(this.state.currentSelectionnOwner);
     });
   }

  render() { 
      // a button with the callback attached to onclick
      <button onClick=onClick={() => this.handleProfileChange ()}>Change Profile</button>
  }
}

Here is the service/nftcontract.js file that was imported above

import { ethers } from "ethers";

// Note: the full abi was copied from the ABI section found in etherscan. 
// This is a simplified version for this example
const abi = [
  {
    inputs: [{ internalType: "uint256", name: "tokenId", type: "uint256" }],
    name: "ownerOf",
    outputs: [{ internalType: "address", name: "", type: "address" }],
    stateMutability: "view",
    type: "function",
  },
];

const provider = new ethers.providers.Web3Provider(window.ethereum);
const address = global.config.addresses.collections.genesis;
const contract = new ethers.Contract(address, abi, provider);

const getOwnerOfToken = async (tokenid) => {
  return await contract.ownerOf(tokenid);
};

export { getOwnerOfToken };

EDIT with Solution: I found the problem. It was a metamask injection issue. On startup an async call would occur before metamask could inject into the window. This did not happen all the time in my case but it would occur when first visiting the app. So to solve that issue I moved all the variables inside the async function like so. So whenever an async call is made a new contract instance is created.

const getOwnerOfToken = async (tokenid) => {
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  const address = global.config.addresses.collections.genesis; 
  const contract = new ethers.Contract(address, abi, provider);
  const ownerAddress = await contract.ownerOf(tokenid);
  //   console.log(`EFService: ${ownerAddress}`);
  return ownerAddress;
};

Answer 1

You are supposed to call the getSigner() on the provider like this

const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const address = global.config.addresses.collections.genesis;
const contract = new ethers.Contract(address, abi, signer);

getSigner() from official docs

Returns a JsonRpcSigner which is managed by this Ethereum node, at addressOrIndex. If no addressOrIndex is provided, the first account (account #0) is used.

You can read it here https://docs.ethers.io/v5/api/providers/jsonrpc-provider/

Also, make sure you are passing the correct address in the ethers.contract

ps: You should switch from classes to functional components in react