NextJS异步获取NFT数据后页面持续加载的问题求助

我编写了如下NextJS代码，用于获取Candy Machine关联的NFT元数据并渲染对应图片：

export default async function Page() {
  const endpoint = `https://${process.env.NEXT_PUBLIC_RPC_URL}`;
  const cmId = process.env.NEXT_PUBLIC_CANDY_MACHINE_ID? process.env.NEXT_PUBLIC_CANDY_MACHINE_ID : '';

let umi: Umi = createUmi(endpoint)
.use(mplTokenMetadata())
.use(mplCandyMachine());

const [nfts, setNfts] = useState<NFT[]>([]);
const [uris, setUris] = useState<string[]>([]);
const [loading, setLoading] = useState(true)

useEffect(() => {
  const getNFTs = async () => {
    await fetchCandyMachine(umi, publicKey(cmId))
      .then(cm => cm.items)
      .then(items => items.map(item => setUris(prevUris => [...prevUris, item.uri])));

    for (const uri of uris) {
      await fetch(uri)
        .then(response => response.json())
        .then(json => {
          let nft = {
            name: json.name,
            symbol: json.symbol,
            description: json.description,
            image: json.image
          }
          setNfts(prevNfts => [...prevNfts, nft]);
        })
    }

  }

  getNFTs()
  .then(e => setLoading(false));
}, []);

return(
  <div>
  <div>
  <Link href='/'>Home</Link>
  </div>
  {loading && 
   <div>Loading...</div>
  }
  {!loading && nfts.map((nft, index) => (
  <div key={index}>
    <Image src={nft.image} alt={nft.name} width={500} height={300} />
  </div>
))}
  </div>
)

  }

但页面始终停留在Loading组件，数据请求从未完成，loading状态一直为true。我已尝试在useEffect钩子内定义异步函数处理数据请求，希望确保useEffect能正常执行完成，使页面根据loading状态动态渲染。请问该如何解决？

核心问题分析 #

• 状态更新异步性导致循环无数据：setUris是异步操作，调用fetchCandyMachine后立刻遍历uris时，uris仍为空数组，循环不执行，后续也不会触发setLoading(false)。
• 异步语法混用引发流程混乱：同时使用async/await与.then容易打乱逻辑顺序，且未处理异常，请求失败会直接卡住流程。
• 组件类型冲突：Page组件标记为async会被Next.js当作Server Component，但你使用了useState、useEffect等Client Component专属Hook，导致逻辑冲突。

修复步骤 #

1. 调整组件类型：移除Page组件的async标记，确保它是Client Component：

export default function Page() {
  // 原有逻辑保留，仅去掉async
}

2. 重构异步逻辑，避免依赖状态中转：直接处理fetchCandyMachine返回的结果，不用setUris中转，批量请求元数据后一次性更新状态：

useEffect(() => {
  const getNFTs = async () => {
    try {
      // 直接获取Candy Machine的items列表
      const cm = await fetchCandyMachine(umi, publicKey(cmId));
      const items = cm.items;
      
      // 批量创建请求Promise
      const nftRequests = items.map(async (item) => {
        const res = await fetch(item.uri);
        const metadata = await res.json();
        return {
          name: metadata.name,
          symbol: metadata.symbol,
          description: metadata.description,
          image: metadata.image
        };
      });
      
      // 等待所有请求完成后更新NFT列表
      const fetchedNfts = await Promise.all(nftRequests);
      setNfts(fetchedNfts);
    } catch (err) {
      console.error('获取NFT数据失败:', err);
    } finally {
      // 无论成功失败，都结束loading状态
      setLoading(false);
    }
  };

  getNFTs();
}, [cmId, umi]); // 添加依赖项，确保值变化时重新执行

3. 添加异常处理：用try/catch/finally包裹异步逻辑，保证即使请求出错，loading状态也能正常结束。

额外优化建议 #

• 如果NFT图片是IPFS地址，需要转换成网关可访问的链接，比如https://ipfs.io/ipfs/${图片CID}，否则Next.js的Image组件可能无法加载。
• 当NFT数量较多时，建议实现分页加载，避免一次性请求大量数据导致页面性能下降。

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