React-JS中无法显示API获取的单条NFT数据问题求助

核心错误点 #

1. 函数与状态变量混淆
   你渲染时使用了getNFTData?.meta?.name，但getNFTData是你定义的异步请求函数，并非存储NFT数据的状态变量。函数本身没有meta属性，自然无法获取到内容。

2. API数据赋值错误
   从你控制台打印的API返回结构来看，响应本身就是单个NFT对象，不存在data.items字段。你当前代码中setNfts(data.items)会把状态设为undefined（因为data.items不存在），直接导致前端无数据可渲染。

修正后的代码示例 #

1. 状态声明与请求函数修正

import { useState, useEffect } from 'react';

// 声明存储单个NFT数据的状态变量（命名为nft更贴合单数据场景）
const [nft, setNft] = useState(null);

async function getNFTData(){
    try {
        const response = await fetch(`https://api.rarible.org/v0.1/items/${chain}:${address}:${Id}`);
        const data = await response.json();
        setNft(data); // 直接赋值整个返回对象，因为data就是单个NFT数据
        console.log(data);
    } catch (error) {
        console.error('NFT数据请求失败:', error);
    }
}

// 在组件挂载或依赖项变化时调用请求函数
useEffect(() => {
    getNFTData();
}, [chain, address, Id]); // 当链、地址、ID变化时重新请求数据

2. 渲染代码修正

// 使用状态变量nft来访问数据，可选链避免初始状态为空时的报错
{nft?.meta?.name}

额外说明 #

• 初始状态设为null，配合可选链操作符?.，可以避免组件首次渲染时因状态未初始化导致的报错。
• 添加try/catch捕获请求异常，方便排查网络或API返回异常问题。

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