React JSX中array.push()失效：Polygon Dapp无法添加NFT到数组

问题根源 #

你控制台打印的polygonNFTs是一个包含result数组的对象，而你循环时错误地使用了polygonNFTs.length——对象本身没有length属性，导致循环条件i < polygonNFTs.length永远不成立（polygonNFTs.length为undefined，比较结果是false），所以循环体从未执行，数组自然为空。

修复代码 #

将循环的遍历对象改为polygonNFTs.result，并调整循环条件：

async function fetchNFTsForContract() {
    const options = {
      chain: "mumbai",
      address: userEthAddress,
      token_address: contractAddress,
    };
    
    const polygonNFTs = await Web3Api.account.getNFTsForContract(options);
    console.log(polygonNFTs); //{total: 3, page: 1, page_size: 100, cursor: null, result: Array(3)}

    let nftArray = [];
    // 改为遍历polygonNFTs.result数组
    for (let i = 0; i < polygonNFTs.result.length; i++) {
        const nftItem = polygonNFTs.result[i];
        const metadataInfo = await fetch(nftItem.token_uri);
        const metadata = await metadataInfo.json();
        const nft = {
            "token_id": nftItem.token_id,
            "token_uri": nftItem.token_uri,
            "contract_type": nftItem.contract_type,
            "token_address": nftItem.token_address,
            "image": metadata["image"],
            "name": metadata["name"],
            "description": metadata["description"]
        };
        nftArray.push(nft);
    };
    console.log(nftArray); // 现在会包含3个NFT对象
    return nftArray;
};

额外优化建议 #

• 用for...of循环简化代码：

for (const nftItem of polygonNFTs.result) {
    // 内部逻辑不变，直接用nftItem代替polygonNFTs.result[i]
}

• 用Promise.all并发请求元数据提升性能：

const nftPromises = polygonNFTs.result.map(async (nftItem) => {
    const metadataInfo = await fetch(nftItem.token_uri);
    const metadata = await metadataInfo.json();
    return {
        "token_id": nftItem.token_id,
        "token_uri": nftItem.token_uri,
        "contract_type": nftItem.contract_type,
        "token_address": nftItem.token_address,
        "image": metadata["image"],
        "name": metadata["name"],
        "description": metadata["description"]
    };
});
const nftArray = await Promise.all(nftPromises);

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