在异步中从数组更新 JSX Function React

Question

我希望显示 api 中的 nft 名称。我可以让它们进入控制台日志，但我正在努力弄清楚如何在屏幕上显示数据。 我试过 useState 但它不知何故陷入了无限循环。

import React, { useState } from "react";
import { useEthers } from "@usedapp/core";
import { Alchemy, Network } from "alchemy-sdk";

const Account = () => {
    const [nftRet, setNft] = useState(['']);

    const {account} = useEthers()
    const config = {
        apiKey: "VtnN1OT-RIJ6NtmzCvMg7fUTKPpXrSrq",
        network: Network.MATIC_MUMBAI    
      };
    const alchemy = new Alchemy(config) 
    const walletAddress = `${account}`;
    const tnsContractAddress = '0xAc11134935a810cD4091e3cE62766faB7CC91e49'  // replace with tns contract address
    const main = async () => {
        const nfts = await alchemy.nft.getNftsForOwner(walletAddress, {
            contractAddresses: [tnsContractAddress],
        });
    // Parse output
    const numNfts = nfts["totalCount"];
    const nftList = nfts["ownedNfts"];
    console.log(`Total NFTs owned by ${account}: ${numNfts} \n`);
   
    let i = 1;

    for (let nft of nftList) {
        console.log(`${i}. ${nft.title}`);
        i++;
    }

    }
    const runMain = async () => {
        try {
          await main();
          process.exit?.(0);
        } catch (error) {
          console.log(error);
          process.exit?.(1);
        }
      };
      
    runMain();


    return (
    <><p
            style={{ width: 600, position: "absolute", marginTop: 400, marginLeft: 135, verticalAlign: "middle", justifyContent: "center" }}>
            Account: {account}</p>
            <p style={{ width: 600, position: "absolute", marginTop: 500, marginLeft: 135, verticalAlign: "middle", justifyContent: "center" }}>

                NFTs: {main} // Trying to print here
            </p></>

    )
}
export default Account;

我的想法是将 for 循环中的全局数组的值设置为 nft.title。 然后在 jsx 中显示该数组，但这也不起作用。

Answer 1

在进行 api 调用时，您应该使用 useEffect 挂钩。 您最终遇到了无限循环，因为您的 api 调用在每次重新渲染时都会运行，因为它是在您的组件中直接调用的。 查看 useEffect文档。 并注意你的 dependencies 数组。 您应该让它为空，以便在组件首次呈现时调用 api。

您的代码中发生的情况如下。 调用Api->setState->重新渲染。 在重新渲染时再次调用 api，再次设置 state，反应看到变化，它重新渲染 => 无限循环。

如果您将 api 电话包装在：

useEffect(()=>{
 const result = myApiCall();
 setMyState(result);
}, []); //Notice the empty array here.

在随后的重新渲染中，它不会被再次调用。 由于依赖项数组中没有列出已更改的依赖项。