React fetch获取NFT排行数据map渲染失败、点击按钮页面消失问题

开发NFT数据展示功能时，需要通过fetch请求拉取按日交易量降序排序的Top5 NFT集合数据，渲染为结构化表格，运行时出现两个异常：

• 对获取到的数据执行map操作时无任何内容展示
• 点击页面上的"get"按钮触发接口请求后，网页所有内容直接消失（白屏）

• App组件中引入并挂载GetTop5组件作为功能承载容器
• GetTop5组件内通过useState初始化空数组state存储接口响应数据
• 按钮点击事件中调用NFTScan的getTopTrendingData接口，请求头设置Accept: application/json
• 控制台打印的接口实际返回结构：包含msg、code、data字段的JSON对象，其中data字段是长度为5的NFT集合数组，单条集合数据包含以下属性：
  • nft_platform：集合名称
  • floor_price：地板价
  • count：交易量/销量
  • image：集合logo地址

1. 接口响应赋值逻辑错误：错误读取了不存在的response.assets字段，未读取实际存储有效数据的response.data字段，导致state拿到的值为undefined，后续map遍历无有效数据源
2. JSX渲染逻辑错误：直接输出静态文本，且尝试访问返回数据中不存在的id、sales属性，触发React运行时报错，直接导致页面整页白屏

import { useState } from 'react';

const GetTop5 = () => {
  // 存储Top5 NFT列表数据
  const [topNftList, setTopNftList] = useState([]);
  const [loading, setLoading] = useState(false);

  const fetchTopTrendingData = async () => {
    setLoading(true);
    try {
      const response = await fetch('替换为实际的NFTScan接口地址', {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          // 接口需要鉴权的话，在此处添加对应的API Key请求头即可
        }
      });
      const res = await response.json();
      // 修复1：正确读取response.data字段赋值，过滤无效返回
      if (res.code === 200 && Array.isArray(res.data)) {
        setTopNftList(res.data);
      }
    } catch (err) {
      console.error('拉取NFT排行数据失败:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="nft-rank-wrapper">
      <button onClick={fetchTopTrendingData} disabled={loading}>
        {loading ? '加载中...' : 'get'}
      </button>

      <table style={{width: '100%', borderCollapse: 'collapse', marginTop: '16px'}}>
        <thead>
          <tr>
            <th style={{border: '1px solid #eee', padding: '8px'}}>排名</th>
            <th style={{border: '1px solid #eee', padding: '8px'}}>集合标识</th>
            <th style={{border: '1px solid #eee', padding: '8px'}}>集合名称</th>
            <th style={{border: '1px solid #eee', padding: '8px'}}>地板价</th>
            <th style={{border: '1px solid #eee', padding: '8px'}}>日交易量</th>
          </tr>
        </thead>
        <tbody>
          {/* 修复2：遍历字段严格匹配接口返回结构，不访问不存在的属性 */}
          {topNftList.map((item, index) => (
            <tr key={index}>
              <td style={{border: '1px solid #eee', padding: '8px', textAlign: 'center'}}>{index + 1}</td>
              <td style={{border: '1px solid #eee', padding: '8px'}}>
                <img 
                  src={item.image} 
                  alt={item.nft_platform} 
                  style={{width: '40px', height: '40px', borderRadius: '6px', objectFit: 'cover'}}
                />
              </td>
              <td style={{border: '1px solid #eee', padding: '8px'}}>{item.nft_platform}</td>
              <td style={{border: '1px solid #eee', padding: '8px'}}>{item.floor_price} ETH</td>
              <td style={{border: '1px solid #eee', padding: '8px'}}>{item.count}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default GetTop5;

• 接口赋值阶段增加返回值校验，直接读取res.data作为列表数据源，从根源避免空值遍历问题
• 渲染阶段在接口未返回唯一id时，使用数组索引作为map遍历的key，所有渲染字段严格匹配接口实际返回的属性，不存在非法字段访问，不会触发渲染崩溃
• 增加加载状态避免重复触发请求，异常捕获逻辑保证接口请求失败时页面不会整体崩溃

内容的提问来源于stack exchange，提问作者LUIS A HERNANDEZ-PADILLA