在React+TypeScript+Axios中过滤指定合约地址的NFT

步骤1：定义NFT数据的TypeScript类型 #

先为返回的NFT数据定义TypeScript接口，保证类型安全：

// 定义NFT合约信息类型
interface NFTContract {
  address: string;
  name?: string;
  symbol?: string;
  // 按需补充其他合约字段
}

// 定义NFT核心信息类型
interface NFT {
  contract: NFTContract;
  id: {
    tokenId: string;
  };
  name?: string;
  image?: {
    url: string;
  };
  // 按需补充其他NFT属性
}

// 定义API响应结构
interface NFTResponse {
  ownedNfts: NFT[];
  totalCount?: number;
  // 按需补充其他响应字段
}

步骤2：实现数据请求与筛选逻辑 #

在React组件中结合useState、useEffect和Axios完成数据拉取与筛选：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

// 替换为你要筛选的目标合约地址
const TARGET_CONTRACT = '0xYourTargetContractAddress';

const FilteredNFTs = () => {
  const [filteredNfts, setFilteredNfts] = useState<NFT[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchAndFilterNFTs = async () => {
      try {
        // 发送请求获取所有NFT数据
        const res = await axios.get<NFTResponse>('https://your-nft-api-endpoint.com');
        const allNfts = res.data.ownedNfts;

        // 筛选目标合约的NFT：统一转小写避免大小写匹配问题
        const targetAddrLower = TARGET_CONTRACT.toLowerCase();
        const matchedNfts = allNfts.filter(nft => 
          nft.contract.address.toLowerCase() === targetAddrLower
        );

        setFilteredNfts(matchedNfts);
      } catch (err) {
        setError('获取或筛选NFT失败，请检查API地址或网络');
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchAndFilterNFTs();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div className="error">{error}</div>;

  return (
    <div className="nft-container">
      <h2>属于合约 {TARGET_CONTRACT} 的NFT</h2>
      {filteredNfts.length === 0 ? (
        <p>未找到该合约下的NFT</p>
      ) : (
        <div className="nft-grid">
          {filteredNfts.map(nft => (
            <div key={nft.id.tokenId} className="nft-card">
              <h3>{nft.name || `NFT #${nft.id.tokenId}`}</h3>
              <p>合约地址：{nft.contract.address}</p>
              {nft.image?.url && <img src={nft.image.url} alt={`NFT ${nft.id.tokenId}`} />}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default FilteredNFTs;

关键注意事项 #

• 地址大小写处理：区块链地址的大小写不影响有效性，但字符串匹配区分大小写，统一转小写可避免匹配失败。
• 类型校验：通过TypeScript接口约束数据结构，能在开发阶段提前发现类型错误，同时获得IDE智能提示。
• 错误捕获：加入try/catch处理请求异常，避免页面崩溃，同时给用户清晰的错误提示。

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