如何在React应用中用Solidity的balanceOf函数验证NFT所有权？

你的Recoil代码完全有用，能帮你拿到用户的钱包地址，这是验证的基础。下面是完整的实现流程：

1. 先搞定区块链连接（Provider/Signer） #

要和链交互，得先从用户钱包（比如MetaMask）获取Signer，代码示例：

import { ethers } from "ethers";

// 获取浏览器钱包的Provider
const getProvider = () => {
  if (typeof window.ethereum !== 'undefined') {
    return new ethers.BrowserProvider(window.ethereum);
  }
  throw new Error("请安装MetaMask等钱包");
};

// 获取用户授权后的Signer
const getSigner = async () => {
  const provider = getProvider();
  await provider.send("eth_requestAccounts", []); // 请求用户连接钱包
  return provider.getSigner();
};

2. 创建合约实例（只需balanceOf的ABI片段） #

不需要完整的合约ABI，只保留balanceOf函数的定义就行（标准ERC721合约的该方法都是统一的）：

const NFT_CONTRACT_ADDRESS = "你的NFT合约地址"; // 替换成实际地址
const NFT_ABI = [
  "function balanceOf(address owner) public view returns (uint256)"
];

// 创建合约实例
const createNFTContract = async () => {
  const signer = await getSigner();
  return new ethers.Contract(NFT_CONTRACT_ADDRESS, NFT_ABI, signer);
};

3. 结合你的Recoil代码完成验证 #

把你已有的钱包地址获取逻辑和上面的链交互代码结合，实现验证：

import { walletState } from "../state/app";
import { useRecoilValue } from "recoil";
import { ethers } from "ethers";

// 封装验证函数
const checkNFTOwnership = async () => {
  const wallet = useRecoilValue(walletState);
  if (!wallet.address) {
    alert("请先连接钱包");
    return false;
  }

  try {
    const nftContract = await createNFTContract();
    // 调用balanceOf查询钱包的NFT余额
    const balance = await nftContract.balanceOf(wallet.address);
    // 余额大于0即说明持有该NFT
    return balance > 0;
  } catch (error) {
    console.error("验证出错：", error);
    return false;
  }
};

关键注意点 #

• 要确保用户连接的链和NFT合约部署的链一致，可以通过walletState里的chainId做判断
• 所有链上调用都是异步操作，必须用async/await处理
• 要处理异常情况：比如用户拒绝钱包授权、合约地址填错、链不匹配等

内容的提问来源于stack exchange，提问作者Dieter